echarts之legend-改变图例的图标为自定义图片
来源:互联网 发布:什么是高阶数据 编辑:程序博客网 时间:2024/04/25 08:55
legend是echarts中的图例
先来一个demo
legend:{ show:true, orient:'horizontal', borderColor:'#df3434', borderWidth:2, data:['蒸发量','降水量','最低气温'] }
效果图如下:
自定义每个图例样式
legend:{ show:true, orient:'horizontal', borderColor:'#df3434', borderWidth:2, data:[ { name:'蒸发量', textStyle:{ fontSize:12, fontWeight:'bolder', color:'#cccccc' }, icon:'stack' }, { name:'降水量', textStyle:{ fontSize:12, fontWeight:'bolder', color:'#df3434' }, icon:'pie' } ] }
效果图如下:
修改图例的图标为自定义图片
首先我找了如下两张图片放在根目录下的images文件夹下
legend:{ show:true, orient:'horizontal', borderColor:'#df3434', borderWidth:2, data:[ { name:'蒸发量', textStyle:{ fontSize:12, fontWeight:'bolder', color:'#cccccc' }, icon:'image://./images/icon1.png'//格式为'image://+icon文件地址',其中image::后的//不能省略 }, { name:'降水量', textStyle:{ fontSize:12, fontWeight:'bolder', icon:'image://./images/icon2.png'//格式为'image://+icon文件地址',其中image::后的//不能省略 }, icon:'pie' } ] }
效果图如下:
阅读全文
1 0
- echarts之legend-改变图例的图标为自定义图片
- echarts之legend-改变图例的图标为自定义图片
- echarts的legend图例的显示与隐藏(legend图例进入页面显示的个数)
- echarts 修改图例legend颜色
- highcharts控制图标的图例legend不允许切换
- Echarts图例legend过多,采用翻页处理
- echarts自定义lengend图例
- echarts使用,[自适应、右上角的工具图标、标题、图例问题]
- ggplot2--legend图例的修改
- ggplot2--legend图例的修改
- echarts中图例legend和坐标系grid实现左右布局
- Echarts中legend图例太多与title重叠问题
- Echarts数据可视化legend图例,开发全解+完美注释
- legend图例
- echarts的legend分多处排列
- NVD3.js 中 图例 (legend) 中文字符 被图标遮住
- 关于echarts自定义legend显示问题
- echarts实现图例的图标和文字响应不同的事件
- 数组的算法
- 程序员背单词
- Web报表系统葡萄城报表:报表工具
- 《Spark快速大数据分析》——读书笔记(3)
- RabbitMQ
- echarts之legend-改变图例的图标为自定义图片
- PowerDesigner如何将消失的工具栏显示出来
- sscanf的常见用法
- 基于Cocos2d-x学习OpenGL ES 2.0系列——纹理贴图(6)
- 解决:java.lang.ClassNotFoundException: org.springframework.web.util.Log4jConfigListener
- 同城购物网站demo
- Web报表系统葡萄城报表:报表软件
- Eclipse编写spring(4.3.9)+springMVC(4.3.9)+Mybatis(3.4.1)/Hibernate(4.3.11)+mysql(5.7)+log4j2项目
- 关于U8,U9中采购订单直接转PDF文件,然后直接发送给相应供应商的解决方案