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 }

            })

       })

有问题的可以直接在评论下问我，欢迎~