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 ... 
随机推荐
- mvc3 RenderAction传参问题
			我在viewA中调用部分视图viewB代码如下:@{Html.RenderAction("NewsList","News",new{pageSize=13, c ... 
- Redis实战(七)
			修改数据 C#语言修改Redis示例. 1.通过key修改单个value using (var redisClient = RedisManager.GetClient()) { var user = ... 
- 洛谷P3402 【模板】可持久化并查集 [主席树,并查集]
			题目传送门 可持久化并查集 n个集合 m个操作 操作: 1 a b 合并a,b所在集合 2 k 回到第k次操作之后的状态(查询算作操作) 3 a b 询问a,b是否属于同一集合,是则输出1否则输出0 ... 
- 使用 Eigen 3.3.3 进行矩阵运算
			Eigen是一个能够进行线性代数运算的C++开源软件包,包含矩阵和矢量操作,Matlab中对矩阵的大多数操作都可以在Eigen中找到. 最近需要计算厄米特矩阵的逆,基于LLT分解和LDLT分解,自己写 ... 
- JAVA中常见异常小结
			1.java.lang.ArithmeticException 算术运算异常,例如除数为0,所以引发了算数异常 2.Java.lang.StringIndexOutOfBoundsException: ... 
- aop相关术语
			AOP是OOP的延续,是Aspect Oriented Programming的缩写,意思是面向切面的编程.并不是全部的AOP框架都是一样的.他们连接点模型的功能可能有强弱之分,有些可以字段,方法,构 ... 
- SpringBoot学习(四)
			spring boot 默认端口是 8080,如果想要进行更改的话,只需要修改 application.properties 文件,在配置文件中加入: 1. server.port=9090 其他常用 ... 
- [BZOJ4542] [JZYZOJ2014][Hnoi2016] 大数(莫队+离散化)
			正经题解在最下面 http://blog.csdn.net/qq_32739495/article/details/51286548 写的时候看了大神的题解[就是上面那个网址],看到下面这段话 观察题 ... 
- 【期望DP】BZOJ2318-[Spoj4060]Game with probability Problem
			[题目大意] Alice和Bob在玩一个游戏.有n个石子在这里,Alice和Bob轮流投掷硬币,如果正面朝上,则从n个石子中取出一个石子,否则不做任何事.取到最后一颗石子的人胜利.Alice在投掷硬币 ... 
- django自定义分页控件
			1.准备数据 在models创建测试表 from django.db import models class Host(models.Model): hostname = models.CharFie ... 
