Echarts 自定义legend图片,修改点击之后的颜色图解
第一个问题:echarts 可以自定义图例的图标,百度上很多回答都是引用的相对路径,但是不知道为啥,我的vue项目就是引用不显示,在network里面找不到相应图片
后来我想了个法子,就是先获取到这个图片,然后复制它的dataURL 也就是在网页上解析之后的图片路径,就能正常显示了——————至于原因,emmmmmmmm……
第二个问题:echarts 自定义图例的图标成功后,点击会显示关闭的功能(我是这样理解的);要实现点击颜色变浅并且实现关闭功能,经过我和我另一个前端同事总结出了两种方法,
第一种,绘制svg图片,在阿里巴巴图标库上制作新的svg图片下载,下载的包里面会有一个iconxx,svg 获取到路径,写在icon:'path://',echarts会自动识别这个图例图片,好处是图片也不需要上传,
并且echarts自己会处理颜色变化,个人觉得可能是echarts图例的实现原理也是这样的,但是没看到原码——这是我同事的实现方式
第二种,写个自定义的png图片,利用icon:icon ,data:{
icon:''xxxxxxxx.png
},。利用echarts的点击选择图例事件触发
代码如下: var myChart = echarts.init(this.$refs.xxxx);
myChart.on('legendselectchanged',function(params){
var name = params.name;
if(name === '主动风险'){
if(!params.selected[name]){
this.icon = 'aaaaaaa.png';
mychart.setOption(self.getOption(data))
}else{
this.icon = 'xxxxxx.png';
mychart.setOption(self.getOption(data))
}
}
})
暂时自定义需求只有一个图标需要处理,如果多的话,可以自定去写个公共方法封装一下,应该也是可以的
Echarts 自定义legend图片,修改点击之后的颜色图解的更多相关文章
- 学习笔记-echarts自定义背景图片
困扰我已久的问题就解决了. code: //使用canvas把背景添加到echarts里 var img = new Image();var canvas = document.createEleme ...
- Diycode开源项目 磁盘图片缓存+自定义webViewClient+图片点击js方法
1.磁盘图片缓存器DiskImageCache 1.1.这个类很多情况都可能用的到,耦合性很低,所以分开讲. 源代码: /* * Copyright 2017 GcsSloop * * License ...
- Android 三档自定义滑动开关,禁止点击功能的实现,用默认的seekbar组件实现
android三档自定义滑动开关,禁止点击功能的实现,普通开关网上有很多例子,三档滑动开关的则找了整天都没有相关例子,开始用普通开关的源码修改了自己实现了一个类,但效果不如人意,各种边界情况的算法很难 ...
- echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮
echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...
- Android定位&地图&导航——基于百度地图,实现自定义图标绘制并点击时弹出泡泡
一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...
- 【转】Android循环滚动广告条的完美实现,封装方便,平滑过渡,从网络加载图片,点击广告进入对应网址
Android循环滚动广告条的完美实现,封装方便,平滑过渡,从网络加载图片,点击广告进入对应网址 关注finddreams,一起分享,一起进步: http://blog.csdn.net/finddr ...
- Echarts自定义折线图例,增加选中功能
用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应 ...
- 自定义带图片和文字的ImageTextButton
今天我们来讲一下有关自定义控件的问题,今天讲的这篇是从布局自定义开始的,难度不大,一看就明白,估计有的同学或者开发者看了说,这种方式多此一举,但是小编我不这么认为,多一种解决方式,就多一种举一反三的学 ...
- Android SeekBar自定义使用图片和颜色显示
案例使用的图片如下: 1.在res/drawable目录下新增一个xml风格文件,seekbar_define_style.xml ? 1 2 3 ...
随机推荐
- activity 和 fragment 传递信息
acitvity 传递信息到fragment 初始化fragment 时可以传递arguments 该参数类型时Bundle activity 会持有fragment引用 通过通过参数的set方法 ...
- kettle的基本使用
一.下载下载kettlehttp://sourceforge.net/projects/pentaho/files/Data%20Integration/7.0/pdi-ce-7.0.0.0-25.z ...
- iOS简单音乐实现、React-Native完整项目、仿闲鱼京东列表分页、语音识别、网络加载过度动画等源码
iOS精选源码 iOS快速入手语音识别.听写.评测.播报 网络加载数据的过渡动画(仿简书网页) iOS 封装跑马灯和轮播效果 crash防护组件,适用常见常用的数组,字典等crash保护 iOS:高仿 ...
- 关于mysql的符合主键的定义和解释
DROP TABLE IF EXISTS `v9_vote_data`;CREATE TABLE `v9_vote_data` ( `userid` mediumint(8) unsigned DE ...
- 高可用性的mongo集群搭建
mongoDB安装 参照:https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/ 配置yum管理包 在路径/etc/y ...
- django框架基础-django模板语言-长期维护
################## 常用的模板语言 ####################### # django的模板语言, # # 只需要记两种特殊符号: # # {{ } ...
- Android内存调优的一些方法
一.巧妙使用软引用和弱引用 软引用,系统内存紧张时会回收软引用对象,一般用用高速缓存,例如图片缓存,我们一般通过内存缓存图片来提高图片加载速度,但内存吃紧的时候可以通过软引用及时对图片资源回收. 弱引 ...
- MySQL之数据存储引擎
1.什么是存储引擎: 现实生活中我们用来存储数据的文件有不同的类型,每种文件类型对应各自不同的处理机制:比如处 理文本用txt类型,处理表格用excel,处理图片用png等,数据库中的表也应该有不同的 ...
- Centos7下常见目录
/etc/fstab
- [LC] 268. Missing Number
Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...