Echarts 多选框自定义selected显示隐藏折线条

当你看到这篇文章的时候,我相信你一定已经知道legend属性下的 selected:Boolean  用来控制显示隐藏折线图,但是想实现通过checkbox 多选框自定义切换显示隐藏还有一些难度。

发现已有解决方法是基于jq 或者js 获取id  不太灵活 ,也不适用于antd  动态生成的多选框

注意:为了简化代码 引用了loadsh 库!

Loadsh

解决方法如下:

1.

如图所示

2. 注意:change方法中 获取的e 是一个数组而不是我们需要的对象形式,需要进行转化!


函数方法

:_.assignIn() 该方法 是用于分配来源对象的可枚举属性到目标对象上。 来源对象的应用规则是从左到右,随后的下一个对象的属性会覆盖上一个对象的属性且它会遍历并继承来源对象的属性


注: 声明的 list 是获取到所有多选框的值 类型:Array;传入的e 是获取被选中的多选框的值 类型:Array!


3.此时我们拿到的showObj 这个对象 已经符合 selected的要求,直接赋值即可。注意:赋值后需要重新渲染,否则无效


在setOption之前赋值噢

此时。我们已经实现了 多选框点击 切换隐藏 折线图。同理,饼图也可以的


举个例子:

思路如图
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容