在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 }
})
})
有问题的可以直接在评论下问我,欢迎~