Echarts 多選框自定義selected顯示隱藏折線條

當你看到這篇文章的時候,我相信你一定已經(jīng)知道legend屬性下的 selected:Boolean? 用來控制顯示隱藏折線圖,但是想實現(xiàn)通過checkbox 多選框自定義切換顯示隱藏還有一些難度。

發(fā)現(xiàn)已有解決方法是基于jq 或者js 獲取id? 不太靈活 ,也不適用于antd? 動態(tài)生成的多選框

注意:為了簡化代碼 引用了loadsh 庫!

Loadsh

解決方法如下:

1.

如圖所示

2. 注意:change方法中 獲取的e 是一個數(shù)組而不是我們需要的對象形式,需要進行轉化!


函數(shù)方法

:_.assignIn() 該方法 是用于分配來源對象的可枚舉屬性到目標對象上。 來源對象的應用規(guī)則是從左到右,隨后的下一個對象的屬性會覆蓋上一個對象的屬性且它會遍歷并繼承來源對象的屬性


注: 聲明的 list 是獲取到所有多選框的值 類型:Array;傳入的e 是獲取被選中的多選框的值 類型:Array!


3.此時我們拿到的showObj 這個對象 已經(jīng)符合 selected的要求,直接賦值即可。注意:賦值后需要重新渲染,否則無效


在setOption之前賦值噢

此時。我們已經(jīng)實現(xiàn)了 多選框點擊 切換隱藏 折線圖。同理,餅圖也可以的


舉個例子:

思路如圖
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容