模仿echarts实现图例点击事件

<ul>
  <li v-for="(item,index) in legend2Data"  class="hoverObj" @click="dispatchSth(item.name,index)" :key="item.name">
    <span class="bgLi hoverObj"  :style="{background: item.show ? item.color : '#ccc'}" ></span>
    <span>{{item.name}}</span>
  </li>
</ul>

<div id="chart2Cont"></div>

export default{
  name:'chart1',
  data(){
    return {
      legend2Data:[{name:'aa',show:false,color:'#ff0000'}],//第一列雷达图图例数据
      clickLengedName:[]
   }
  },
mounted(){

this.chart2=echarts.init(document.getElementById('chart2Cont'));  //图标ID
},
  methods:{    
dispatchSth(name,index){
  this.legendToGray(name,index,this.clickLengedName,this.legend2Data);  //将图例置灰
  this.chart2.dispatchAction({
    type:'legendToggleSelect',
    name:name
  })
},

legendToGray(name,index,clickLengedName,legendData){
  if(clickLengedName.length){

    let hasIndex=clickLengedName.findIndex(item => {
      return item.name==name;
    })

    if(hasIndex== -1){
      // console.log('循环后没有该项则置灰：======'+2);
      clickLengedName.push({
        name:name,
        index:index
      })
      legendData[index].show=false;
    }else{
      // console.log('循环后有该项则取消置灰：======'+1);
      clickLengedName.splice(hasIndex,1);
      legendData[index].show=true;
    }
  }else{
    //直接置灰
    //console.log('直接置灰：======'+0);
    clickLengedName.push({
      name:name,
      index:index
    })
    legendData[index].show=false;

  }
},

  }
}