echars legend图例中显示动态数据

1.问题描述

在echars图中，通过坐标轴指示器axispointer触发时，在legend图例中动态展示数据（与tooltip提示框相似，相当于把tooltip中的数据显示在legend中）。

2.解决思路

（1）若想在legend中动态展示数据，就要先想到legend中的数据是随着axispointer（坐标轴指示器）的移动而动态显示的。因此，要通过axispointer去获取想要展示的数据。
（2）由于legend formatter函数的参数会自动遍历，因此选择switch，可以改变不同的图例legend

3. 解决方法（记录一下自己的解决方法）

（1）首先在axispointer中

axisPointer: {
  link: {xAxisIndex: 'all'},
  label: {
    backgroundColor: '#ccc',
    formatter: param => {
      const Param1 = param.seriesData.find(item => item.seriesName === 'Param1');
      const Param2 = param.seriesData.find(item => item.seriesName === 'Param2');
      const Param3 = param.seriesData.find(item => item.seriesName === 'Param3');
      const Param4 = param.seriesData.find(item => item.seriesName === 'Param4');
      if(Param1) {
      //把想要展示的数据存储在data中
        this.LegendData1 = Param1.data;
        this.LegendData2 = MA10Param.data;
        this.LegendData3 = Param3.data;
        this.LegendData4 = Param4.data;
      }
      return value;
    }
  }
},

（2）legengd中，利用switch可以达到不同的图例具有不同的样式和不同数据

legend: {
  left: 'center',
  data: [this.title, 'Param1', 'Param2', 'Param3', 'Param4'],
  formatter: (params) => {
    switch (params) {
      case this.title:
        return params;
        break;
      case 'Param1':
        return params + ': ' + this.LegendData1;
        break;
      case 'Param2':
        return params + ': ' + this.LegendData2;
        break;
      case 'Param3':
        return params + ': ' + this.LegendData3;
        break;
      case 'Param4':
        return params + ': ' + this.LegendData3;
        break;
      default: 
        return '';
    }
  }
},