echart自定义 tooltip

echart自定义 tooltip

1.echart配置项

 options: {
        title: {
          left: 'center',
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
          //
          formatter(params) {
            // console.log(this)
          }
        },
        grid: {
          top: '6',
          left: '0',
          right: '0',
          bottom: '3%',
          show: true,
          containLabel: true
        },
        xAxis: [
          {
            axisLine: {
              lineStyle: {
                color: '#e7eaed'
              }
            },
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            axisLine: {
              lineStyle: {
                color: '#e7eaed'
              }
            },
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '80%',
            color: '#2f7ecf',
            data: []
          }
        ]
      },

 data() {
    return {
    	tipData:[]  //显示数据1，通过dataIndex取值
    }
 },
 methods: {
 	showDataOfOptions() {
      const that = this
      let tip = function(params) {
        const index = params[0].dataIndex // 因为索引唯一，正好通过这个进行关联
        let res = ''
        if (that.tipData.length > 0) {
          res = `${that.tipData[index]}`
        }
        return res + '<br />' + (params[0].data ? params[0].data : '--')
      }
      this.options.tooltip.formatter = tip
    },
 }

2.效果