点击legend,tooltip提示

image.png

如果不加单位，对于echarts本身提供的tooltip提示已经够用了,点击legend后tooltip显示的也很正常
但是如果需要添加单位，就需要重写一下tooltip

代码

  tooltip:{
        show: true,
           trigger: 'axis',
           axisPointer : {            // 坐标轴指示器，坐标轴触发有效
             type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
           },
          formatter: function(param){
              return param[0].marker + param[0].seriesName + ": "  + param[0].data  + "件" + "</br>"+
                     param[1].marker+param[1].seriesName + ": " + param[1].data + "元"
          }
    },

效果图

image.png

在这里看到的也是正常的，

报错点

但是如果你点击了legend就会报错告诉你data没有找到

原因

因为你关闭掉一个legend时，打印出来的param的数组长度会变成1，就会报错，legend都关闭后报错，因为数组为空

解决它

这个时候我们就需要在formatter函数里判断
这个时候的判断准则就是数组的长度，如上面的情况只有两种情况
第一种情况 param长度是2的时候显示
第二种情况 param长度是1的显示，这个时候又有两种情况只有一个销量，或者只有一个金额
分析过后代码实现它，贴上全部代码可以直接放到e'charts官网demo上运行

option = {
    tooltip:{
        show: true,
           trigger: 'axis',
           axisPointer : {            // 坐标轴指示器，坐标轴触发有效
             type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
           },
          formatter: function(param){
              if(param.length === 2){
                 return param[0].marker+param[0].seriesName + ": "  + param[0].data + "件" + "</br>"+
                        param[1].marker + param[1].seriesName + ": " + param[1].data + "元"
              }else{
                  if(param[0].seriesName === "销量"){ 
                      return param[0].marker + param[0].seriesName + ": "  + param[0].data  + "件"
                      
                  }else{
                      return param[0].marker+param[0].seriesName + ": " +param[0].data + "元"
                  }
              }
          }
    },
    legend:{
        data:["销量","金额"]
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis:[
         {
        type: 'value'
    },
     {
        type: 'value'
    }],
    series: [
        {
        name: "销量",    
        data: [12, 20, 15, 8, 7, 11, 13],
        type: 'bar'
    },
    {
        name: "金额",
        yAxisIndex: 1,
        data: [165, 134, 199, 80, 70, 110, 130],
        type: 'bar'
    }
    ]
};

如果是3个legend也是一样的套路，可能判断就会多一些，思路都是一样的，所以如无必要不建议弄那么多维度在一个图上