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 ...
随机推荐
- python调用存储过程失败返回1787错误
(1787, 'When @@GLOBAL.ENFORCE_GTID_CONSISTENCY = 1, the statements CREATE TEMPORARY TABLE and DROP T ...
- selenium中quit与close方法的区别
https://blog.csdn.net/lbxoqy/article/details/71981222
- 识别ios系统设备并获取版本号
let isIOS = userAgent.toLowerCase().indexOf("like mac os x") > 0; //ios终端 if (isIOS) { ...
- Weave实现跨主机容器互联
安装与启动 直接从github下载二进制文件安装. docker_host1(服务器1): 下载weave # sudo wget -O /usr/local/bin/weave https://ra ...
- web中间件之nginx
web中间件之nginx https://www.jianshu.com/p/d8bd75c0fb1b 对nginx正向代理和反向代理理解特别好的一篇文章. 一.nginx nginx缺点,负载均 ...
- notepad++下载及安装
下载notepad++: 官网 安装:https://jingyan.baidu.com/article/154b463109921828cb8f4151.html 如果下载的64位没有插件管理器,单 ...
- 吴裕雄--python学习笔记:爬虫基础
一.什么是爬虫 爬虫:一段自动抓取互联网信息的程序,从互联网上抓取对于我们有价值的信息. 二.Python爬虫架构 Python 爬虫架构主要由五个部分组成,分别是调度器.URL管理器.网页下载器.网 ...
- java 实体类中日期格式转换
@JsonFormat(locale="zh", timezone="GMT+8", pattern="yyyy-MM-dd HH:mm:ss&quo ...
- 使用nodeJs安装Vue-cli并用它快速构建Vue项目
部分摘自:http://www.cnblogs.com/wisewrong/p/6255817.html(已在本地测试) 前提:nodeJs本地已安装. 一.安装 vue-cli 1.使用nodeJs ...
- curl_getinfo的巧用
最近使用curl的时候,发现了一个比较好用的函数,当然是初级者适用的一个函数,就是curl_getinfo(), 在抓取一个页面的时候,会遇到302页面跳转的情况,刚开始处理的时候,是用curl抓取一 ...