Echarts legend互斥点击事件

最新推荐文章于 2024-05-06 10:59:29 发布

MartinYangHJ

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量259

点赞数 2

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/yhj198927/article/details/134988609

版权

观察下图，地址：地图-按照分类显示省+散点 - category-work,geo地理坐标,legend,series-map地图,series-scatter散点图,tooltip提示框,visualMap视觉映射 - makeapie echarts社区图表可视化案例

点击下面的legend，即推广省、试点省、未发展省时，只显示点击的类型省份，如何实现呢？

实现很简单，如下：

myChart.on("legendselectchanged", function(param) {
            console.log(param);
            let op=this.getOption();
            for(key in op.legend[0].data){
                //先将所有的设置为false,即隐藏所有的
                op.legend[0].selected[op.legend[0].data[key]]=false;
            }
            //显示点击的类型
            op.legend[0].selected[param.name]=true;
            //重新绘制一下Echarts图，此步为必须，否则以上设置将不生效
            myChart.setOption(op);
          });