关于vue.js:echart-bar分组后自定义tooltip及x轴label

echarts 实现分组柱状图，且小组内自定义每一个 bar 的 label

option = {color: ['#3e6591', '#eb7d22', '#d73f45'],
      grid: {left: 100},
    xAxis: {
          axisLine: {lineStyle: {color: '#ccc'}
        },
          axisLabel: {textStyle: {color: '#777'}
        }
    },
    yAxis: [{
          inverse: true,
          splitLine: {show: true},
          axisTick: {
              length: 0,
              lineStyle: {color: '#ccc'}          
        },
          axisLine: {lineStyle: {color: '#ccc'}
        },
        data: ['-', '-', '-', '-', '-']      
    }],
    series: [{
        type: 'bar',
        data:[220, 182, 191, 234, 290],
        label: {
             normal: {
                  show: true,
                  position: 'left',
                  textStyle: {color: '#000'},
                  formatter: '合同金额',              
            }
        }
    }, {
        type: 'bar',
        data:[210, 132, 91, 204, 220],
        label: {
             normal: {
                  show: true,
                  position: 'left',
                  textStyle: {color: '#000'},
                  formatter: '已收款',              
            }
        }      
    }, {
        type: 'bar',
        data:[120, 132, 131, 254, 278],
        label: {
             normal: {
                  show: true,
                  position: 'left',
                  textStyle: {color: '#000'},
                  formatter: '应收款',              
            }
        }      
    }]
};

例如：

相干代码：

  initCharts() {let seriesArr = []
      let detail = this.detail ? this.detail : ''
      let arr = [
        [
          {name: ['钻井总数', '射孔总数', '压裂总数'],
            data: [{ name: '钻井总数', value: detail.totalDrilling ? detail.totalDrilling - 0 : 0},
              {
                name: '射孔总数',
                value: detail.totalPerforate ? detail.totalPerforate - 0 : 0
              },
              {name: '压裂总数', value: detail.totalFracture ? detail.totalFracture - 0 : 0}
            ]
          }
        ],
        [
          {name: ['已完钻', '已射孔', '已投产'],
            data: [
              {
                name: '已完钻',
                value: detail.finishingDrilling ? detail.finishingDrilling - 0 : 0
              },
              {name: '已射孔', value: detail.fractured ? detail.fractured - 0 : 0},
              {name: '已投产', value: detail.inProduction ? detail.inProduction - 0 : 0}
            ]
          }
        ]
      ]
      arr.forEach((item, ind) => {
        seriesArr.push({// name: item[0].name,
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'bottom',
              textStyle: {color: '#000'},
              formatter: (params, index) => {console.log(params, index)
                return params.data.name
              }
            }
          },
          barWidth: 45,
          color: ind % 2 === 0 ? '#3FA7DC' : '#21a675',
          barGap: '20%', // 每个柱子间距
          barCategoryGap: '60%', // 一组柱子间距
          // 一个 data 是一个色彩的所有数据 蓝色
          data: item[0].data
        })
      })
      // console.log('seriesArr=', seriesArr)
      // return
      // 基于筹备好的 dom，初始化 echarts 实例
      this.$nextTick(() => {
        this.myChartOptions = {
          xAxis: {
            name: '井数',
            type: 'category',
            nameGap: 30,
            nameLocation: 'middle',
            boundaryGap: true,
            // data: ['钻井总数', '已完钻', '射孔总数', '已射孔', '压裂总数', '已投产'],
            // data: ['钻井总数, 已完钻', '射孔总数, 已射孔', '压裂总数, 已投产'],
            data: ['','', ''],
            axisLabel: {
              show: true,
              textStyle: {
                margin: 20,
                fontSize: 14
              },
              formatter: (value, index) => {// console.log(222, value, index)
                return value
              }
            }
          },
          tooltip: {
            trigger: 'axis',
            formatter: function(params) {// console.log('params=', params)
              var result = ''var dotHtml ='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#3FA7DC"></span>'var dotHtml2 ='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#21a675"></span>'
              result +=
                params[0].name +
                ',' +
                params[1].name +
                '</br>' +
                dotHtml +
                params[0].name +
                '：' +
                params[0].value +
                '</br>' +
                dotHtml2 +
                params[1].name +
                '：' +
                params[1].value
              return result
            }
          },
          yAxis: {name: '井数 ( 口)',
            position: 'left',
            nameGap: 30,
            nameLocation: 'center',
            axisTick: {show: true},
            axisLine: {
              onZero: false,
              show: true // 显示坐标线
            }
          },
          series: seriesArr
        }
        this.myChart = this.$echarts.init(document.getElementById('main'))
        this.myChart.setOption(this.myChartOptions)
      })
      // this.myChartOptions.dataset.source = this.energyConsumptionDataSource;
      // 应用刚指定的配置项和数据显示图表。},