首页 > 其他 > 详细

echarts常用方法,legend状态支持两张图片切换(四)

时间:2019-04-25 17:35:48      阅读:214      评论:0      收藏:0      [点我收藏+]

在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 }
            })
       })

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

echarts常用方法,legend状态支持两张图片切换(四)

原文:https://www.cnblogs.com/lmxHome/p/10769738.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!