echarts常用方法,legend狀態支持兩張圖片切換(四)


在UI設計的時候,可能我們在使用echarts時,legend是用圖片渲染的,未選中的legend是用置灰的圖片展示的。即彩色圖片,置灰圖片交互切換。

主要代碼如下:

//圖例事件
  let lgdt = this._ledgend(),
      lgData = lgdt.legendData,lgList = lgdt.legendList,
      imgs = this._icon(),imglg = imgs.length,unIng = this._lgiconUnActive(),
      iconUnActive = `image://${unIng}`;
      myChart.on('legendselectchanged', (params)=>{
            let {selected,name} = params,i = lgList.indexOf(name);
            let theOption = lgData.find(dt => dt.name === name);
         
            let iconActive = `image://${imgs[i%imglg]}`;
            theOption.icon = selected[name] ? iconActive : iconUnActive;
            // 更新圖列
            this.$chart.setOption({
                legend: { data: lgData }
            })
       })

有問題的可以直接在評論下問我,歡迎~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM