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 }
})
})
有问题的可以直接在评论下问我,欢迎~
echarts常用方法,legend状态支持两张图片切换(四)的更多相关文章
- javascript 两张图片切换 三目运算符
<body> <script> function changeImage(){ var s = document.getElementById('myimage'); s.sr ...
- echarts常用方法,饼图切换圆环中文字(三)
在echarts的饼图应用时,遇到过一个需求就是鼠标移到半环上可以切换环中的文字,同时支持legend点击事件.误区是,鼠标移动到环上重新渲染option,以切换内部的文字.重新渲染option的做法 ...
- JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
一般商业网站都有一个语言的需求,就是为了照顾使用正体中文的国人,会特地提供一个切换到正体中文的选项(或曰“繁体中文”).传统做法是在服务端完成的,即通过某些控件或者过滤器转换文本语言.这里笔者介绍一种 ...
- echarts饼图默认状态高亮显示
需求:饼状图默认状态下高亮显示指定内容. 最常见的两种: 一.饼图中间始终默认展示数据总数和统计事项的名字(如下图),这种实现方式比较简单,就不多介绍 二.饼图中间默认展示某一图例的具体数据,鼠标放在 ...
- opencv_判断两张图片是否相同
QQ:231469242 pip install opencv 如果找不到版本,去非官方下载opencv第三方包http://www.lfd.uci.edu/~gohlke/pythonlibs/ 下 ...
- HTML两张图片叠加问题的进一步修改
要想两张图片叠加,只需在circle添加一个Position:absolute就OK了 以上几步,很多大侠前辈都已经说过,相信不用再啰嗦,我想说的是一种扩展,将示例放到右边,可能因为我悟性低,研究了一 ...
- Echarts的legend改变图例图标为自定义图片
当折线图时,legend默认时rect形式,如果需要改图例形状,可以自己设置legend的icon属性 legend: { icon:'stack' }, 1.自定义每个图例样式:为data的每个对象 ...
- matplotlib 显示两张图片,折线图 和 scipy
显示两张图片的代码: import numpy as np from scipy.misc import imread, imsave, imresize import matplotlib.pypl ...
- Linux 下wdcp支持两种安装方式
wdcp支持两种安装方式1 源码编译 此安装比较麻烦和耗时,一般是20分钟至一个小时不等,具体视机器配置情况而定2 RPM包安装 简单快速,下载快的话,几分钟就可以完成源码安装(ssh登录服务器,执行 ...
随机推荐
- Linux资源分析工具杂谈(长文慎入)
Linux资源分析工具杂谈 开篇之前请大家先思考一个问题: 磁盘的平均I/O响应时间是1 ms,这个指标是好,还是差? 众所周知,计算机科学是客观的,也就是说对于一个给定的问题,我们总是 ...
- luogu P3197 [HNOI2008]越狱
构造长度为n的串,给定m种颜色,求使得相邻两位的颜色相同的方案数 显然可以看出长度为n的串染m种颜色的总方案数为$m^{n}$ 然后来考虑相邻两位颜色不同的方案 对于第一位,有m种选择 对于剩余的n- ...
- 论文阅读(Weilin Huang——【ECCV2016】Detecting Text in Natural Image with Connectionist Text Proposal Network)
Weilin Huang——[ECCV2016]Detecting Text in Natural Image with Connectionist Text Proposal Network 目录 ...
- 微信小程序中的rpx与移动设备物理像素
如下图: pt也称逻辑像素点,px物理像素点,1pt等于2px或者3px或更多; iphone6下面0.5pt=1px=1rpx; 使用rpx,小程序在不同设备分辨率下自行转换: PPI=物理像素开根 ...
- 20175208《Java程序设计》第五周学习总结
教材学习内容总结 1.接口:1)接口声明: interface //接口的名字 2)接口体2.实现接口:类实现接口:一个类需要在类声明中使用关键字implements声明该类实现一个或多个接口.如果实 ...
- linux中的strings命令
strings - print the strings of printable characters in files. 意思是, 打印文件中可打印的字符. 我来补充一下吧 ...
- Typescript日期Date如何做格式化字符串
·使用一个date-fns/format的库 安装npm i date-fns --save import format from 'date-fns/format'; const newdate = ...
- html禁止页面滚动
<div @touchmove.prevent></div> @touchmove.prevent //加到标签上禁止滚动
- [Offer收割] 编程练习赛63
题目1 : 命名 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 有两个公司想要合并,第一个公司的名字是一个字符串S,第二个公司的名字是一个字符串T. 合并后的新公司是这样 ...
- latch
signal definition sequence: