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登录服务器,执行 ...
随机推荐
- 用Volume在主机和Docker容器文件传输
1.使用Volume在主机和容器之间传输文件. 在官方文档中可以看到使用如下命令即可创建一个volume: Create a volume: $ docker volume create my-vol ...
- Servlet基本知识总结
Servlet 简介 Servlet是什么? Servlet是一个Java编写的程序,此程序是基于Http协议的,并运行在web服务器上或者应用服务器上.它主要是作为web浏览器或其他Http客户端的 ...
- koa2:通过Ajax方式上传文件,使用FormData进行Ajax请求
koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...
- android 开发设计模式---Builder模式
我们通过一个例子来引出Builder模式.假设有一个Person类,我们通过该Person类来构建一大批人,这个Person类里有很多属性,最常见的比如name,age,weight,height等等 ...
- 打return
var zz=xx(); alert(zz); zz=yy(); alert(zz); function xx(){ var i=1,j=2; return i+j; } function yy(){ ...
- 关于用IIS在.net平台发布网页的一些坑
说明:由于需要显示页面的表格的内容,要用pageOffice插件,而装pageoffice之前需要装.net3.5,直接导入. 为什么要分别装.net4.5和.net3.5 ? 都要装? 问题:刚才 ...
- showDialog 必须Stateful
showDialog 必须Stateful 因为需要context
- nginx rewrite (转发)
1.location正则写法 一个示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location / { # 因为所 ...
- Exp3 免杀原理与实践 20164303 景圣
Exp3 免杀原理与实践 一.实验内容 1. 正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己利用shellcode编程等免杀工具或技巧 2. 通过组合 ...
- HBase API 基础操作
对于数据操作,HBase支持四类主要的数据操作,分别是: Put :增加一行,修改一行 Delete :删除一行,删除指定列族,删除指定column的多个版本,删除指定column的制定版本等 Get ...