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

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

转载于:https://www.cnblogs.com/lmxHome/p/10769738.html

echarts常用方法，legend状态支持两张图片切换（四）相关推荐

android两张图片切换,android recyclerview 切换列表视图
一种是编写两个Adapter,切换Adapter的方式来实现切换列表视图.另一种方式是同一个Adapter切换布局layout的方式来切换视图直接复制现在视图,控件ID未作变更,这样可以更改最少的代 ...
Dynamic html实现页面上两张图片来回切换
错误的代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
图片的轮流html,两张图片轮流切换
两张图片轮流切换 var t ; $(function(){ changeImg(); $("#span01″).mouseover(function(){ showOrHide(" ...
hover时候缓慢切换两张图片
效果: hover的时候想让两张图片翻转的时候速度慢一点,而不是瞬间变成另一张图片,我们可以采用淡入淡出的效果. 实例: <!DOCTYPE html> <html><h ...
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
一般商业网站都有一个语言的需求,就是为了照顾使用正体中文的国人,会特地提供一个切换到正体中文的选项(或曰"繁体中文").传统做法是在服务端完成的,即通过某些控件或者过滤器转换文本语 ...
【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）
目录先睹为快(效果) 1.实现Echarts多条曲线 2.点击echarts触发接口请求 2.1 先默认隐藏部分数据 2.2 自定义legend图例点击事件 3.源码下载地址(解压即用) **[写在 ...
和12岁小同志搞创客开发：检测按键状态的两件法宝
目录 1.检测电平变化,判断按键状态 2.使用中断触发,判断按键状态机缘巧合在网上认识一位12岁小同志,从零开始系统辅导其创客开发思维和技巧. 项目专栏:https://blog.csdn.n ...
python怎样把两个图画到一起_python实现两张图片拼接为一张图片并保存
本文实例为大家分享了python实现两张图片拼接为一张图片并保存的具体代码,供大家参考,具体内容如下这里主要用Python扩展库pillow中Image对象的paste()方法把两张图片拼接起来 f ...
as5300g2 nas软件功能_铁威马F2-221上手：家用NAS入门首选，还支持两年换新
近两年我出来工作后,不少工作文件.视频素材都需要备份,而且手机更换了两三次,里边的照片也有一定的备份需求.按照我以往的习惯,备份文件无非就是上传到云盘.然而随着文件照片数量的增加,实际操作下来体验真的 ...

echarts常用方法，legend状态支持两张图片切换（四）

echarts常用方法，legend状态支持两张图片切换（四）相关推荐

最新文章

热门文章