vue2 调用echarts api模拟legend置灰效果（使用div自定义实现legend）

项目需要自定义legend，仅用echarts自身配置无法实现，使用div绘制legend，再使用echarts api实现legend点击置灰效果

  <div
      class="item"
      v-for="(item, index) in data"
      key="index"
      @click="dispatchEvent(item, index)">
        <div
           class="circle"
           tyle="{ backgroundColor: getColor(item) }">
        div>
        <p>{{ item.name }}p>
        <div class="num">{{ item.cent }}div>
       div>
  div>

getColor用于获取数据对应的颜色块，如果禁用显示灰色
color是项目中定义的一个长度为13的颜色数组

  computed: {
    getColor() {
      return (obj) => {
        if (obj.disable) {
          return '#E0E0E0';
        }
        const index = this.data.findIndex((item) => item.name === obj.name);
        if (this.color[index]) {
          return this.color[index];
        } else {
          return this.color[index % 13];
        }
      };
    },
  },

调用echarts api，根据名称切换legend

 dispatchEvent(item, index, key) {
      item.disable = !item.disable;
      this.$set(this.data, index, item);
      this.$refs.chart.dispatchAction({
        type: 'legendToggleSelect',
        name: item.name,
      });
    },

需要注意：
option中legend属性必须要写，不然不能正常触发legendToggleSelect

  legend: {
     show: false,
 }