模仿echarts实现图例点击事件

最新推荐文章于 2025-03-31 16:57:18 发布

原创最新推荐文章于 2025-03-31 16:57:18 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

本文详述了使用ECharts实现图例交互的过程，包括如何通过点击切换图例显示状态，利用dispatchAction进行图例选择与取消选择，以及如何在点击图例时更新其视觉效果。此操作适用于需要动态控制图表元素可见性的场景。

<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;

  }
},

}
}