echart点击折线主动隐藏整条折线

原创已于 2023-02-08 11:04:28 修改 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #echarts #前端

于 2023-01-05 13:53:10 首次发布

前端专栏收录该内容

30 篇文章

订阅专栏

该代码段展示了如何在ECharts中设置图表选项，调整大小，并监听点击事件。当图表被点击时，它会遍历事件参数中的目标对象，查找与系列索引关联的图例，并执行legendUnSelect操作来取消选中对应的图例项。

this.echart.setOption(option);
this.echart.resize();
let _this = this;
this.echart.getZr().on('click', function(params) {
   console.log('整条click',params);
   const { target, topTarget } = params
   let i=0;
   while(i<20){
       if(target['__ec_inner_'+i] && (target['__ec_inner_'+i].seriesIndex || target['__ec_inner_'+i].seriesIndex=='0')){
           _this.echart_1.dispatchAction({
               type: 'legendUnSelect',
               // 图例名称
               name: option.legend.data[target['__ec_inner_'+i].seriesIndex]
           })
       }
       i++;
   }
})