Echarts的legend改变图例图标为自定义图片

当折线图时,legend默认时rect形式,如果需要改图例形状,可以自己设置legend的icon属性
legend: {
icon:'stack'
},
1、自定义每个图例样式:为data的每个对象修改icon属性
legend:{
show:true,
orient:'horizontal',
borderColor:'#df3434',
borderWidth:,
data:[
{
name:'蒸发量',
textStyle:{
fontSize:,
fontWeight:'bolder',
color:'#cccccc'
},
icon:'stack'
},
{
name:'降水量',
textStyle:{
fontSize:,
fontWeight:'bolder',
color:'#df3434'
},
icon:'pie'
}
]
}

2、修改图例的图标为自定义图片
首先我找了如下两张图片放在根目录下的images文件夹下

legend:{
show:true,
orient:'horizontal',
borderColor:'#df3434',
borderWidth:,
data:[
{
name:'蒸发量',
textStyle:{
fontSize:,
fontWeight:'bolder',
color:'#cccccc'
},
icon:'image://./images/icon1.png'//格式为'image://+icon文件地址',其中image::后的//不能省略
},
{
name:'降水量',
textStyle:{
fontSize:,
fontWeight:'bolder',
icon:'image://./images/icon2.png'//格式为'image://+icon文件地址',其中image::后的//不能省略
},
icon:'pie'
}
]
}

Echarts的legend改变图例图标为自定义图片的更多相关文章
- echarts之legend-改变图例的图标为自定义图片
legend:{ show:true, orient:'horizontal', borderColor:'#df3434', borderWidth:2, data:[ { name:'蒸发量', ...
- 【随笔】设置title标题图标为自定义图片
第一步: 利用图标工具(有很多)制作图标文件(favicon.ico)上传到网站所在的服务器的根目录下,这个文件必须是16*16大小的图标文件. 第二步: 在<head></head ...
- Visual Studio 2015 改变窗体图标 & 任意位置打开窗体 & 禁止鼠标改动窗体大小
1.改变窗体图标 先把图标放到项目文件夹中,然后点击窗体属性的ICON添加即可. 参考:https://www.cnblogs.com/yangxuli/p/8075484.html?tdsource ...
- React native 之android的图标和启动图片
哎哎呀呀,上篇说到了react native的IOS的图标和启动图片的设置,其实最主要的是尺寸!相应的尺寸设定好了以后就不会报错了! ok~这篇说的是React native的android的图标和启 ...
- react-native android app名字 app包名、图标和启动图片设置
1.设置名字 打开 android/app/src/main/res/values/strings.xml 如图,进行修改即可 2.设置图标,最简单可以直接替换,其他后在看 在上图中几个文件夹中都有一 ...
- angularjs1 自定义图片查看器(可旋转、放大、缩小、拖拽)
笔记: angularjs1 制作自定义图片查看器(可旋转.放大.缩小.拖拽) 2018-01-12 更新 可以在我的博客 查看我 已经封装好的 纯 js写的图片查看器插件 博客链接 懒得把 ...
- AJ学IOS(44)之网易彩票自定义图片在右边的Button_弹出view_ios6,7简单适配
AJ分享,必须精品 效果: 注意图里面了吗,其实那个效果做起来真的很简单,在iOS中苹果给我们封装的很好,关键是那个按钮 系统的按钮的图片是在左边的,这里我们需要把他调整到右边,然后呢需要我们自己做一 ...
- iOS获取app图标和启动图片名字(AppIcon and LaunchImage's name)
在某种场景下,可能我们需要获取app的图标名称和启动图片的名称.比如说app在前台时,收到了远程通知但是通知栏是不会有通知提醒的,这时我想做个模拟通知提示,需要用到icon名称:再比如在加载某个控制器 ...
- 网页qq客服代码并自定义图片
<script>var online= new Array();</script> <script src="http://webpresence.qq.com ...
随机推荐
- CentOS系统初始化---不断更新中
注意EOF不能有空格tab键 #get os version release=$(rpm -q --qf "%{VERSION}" $(rpm -q --whatprovides ...
- HashMap碰撞问题
HashMap是最常用的集合类框架之一,它实现了Map接口,所以存储的元素也是键值对映射的结构,并允许使用null值和null键,其内元素是无序的,如果要保证有序,可以使用LinkedHashMap. ...
- angular4 使用window事件
Angular使用window对象中的事件最好不要像使用jQuery那样使用 如下: 注:写事件直接绑定到window对象上了,组件销毁时这个事件没有解绑 可以使用剪头函数不用声明that 注:这样写 ...
- 八皇后--python代码
迭代和递归方法的运用 import random def prettyprint(solution): #图形化处理数据 def line(pos,length=len(solution)): #单行 ...
- Python开发基础-Day31 Event对象、队列和多进程基础
Event对象 用于线程间通信,即程序中的其一个线程需要通过判断某个线程的状态来确定自己下一步的操作,就用到了event对象 event对象默认为假(Flase),即遇到event对象在等待就阻塞线程 ...
- Redis学习与总结
Redis是业界普遍应用的缓存组件,研究一个组件框架,最直观的办法就是从应用方的角度出发,将每个步骤的考虑一番,从这些步骤入手去研究往往能够最快的体会到一个组件框架的设计哲学.以Redis为例,每当发 ...
- 【BZOJ 2555】 2555: SubString (SAM+LCT)
2555: SubString Time Limit: 30 Sec Memory Limit: 512 MBSubmit: 2548 Solved: 762 Description 懒得写背景了 ...
- 又见Python<1>:使用Anaconda搭建Python开发环境(Windows7)
1.为什么选择Anaconda? Anaconda解决了Python使用痛点. Python好用但是令人头疼的就是库管理与Python不同版本的问题,特别是Windows环境下. 2.什么是Anaco ...
- 【MPI】矩阵向量乘法
输入作乘法的次数K 然后输入矩阵和向量的维度n 然后输入一个n维向量 然后输入K个n阶方阵 程序会给出该向量连续与此K个方阵做乘法后的结果 主要用了MPI_Gather, MPI_Allgather, ...
- Unity随手机
该文章持续更新! 协程的返回值必需是 IEnumerator 协程的参数不能加关键字 ref 或 out 在函数 Update 和 FixedUpdate 中不能使用 yield 语句,但可以启动协程 ...