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 ...
随机推荐
- Web开发——服务器端应用技术简单比较
在开发动态网站时,离不开服务器端技术,服务器端技术主要有CGI.ASP.PHP.ASP.NET和JSP. 1.CGI CGI(Common Gateway Interface 通用网关接口)是最早用来 ...
- 图片热点的使用,html <area> 的用法
<area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: < ...
- Scrollify – jQuery全屏滚动插件
和 fullPage.js 一样,Scrollify 也是一款基于 jQuery 的全屏滚动插件.跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB.但功能上不如 fu ...
- Python序列化模块-Pickel写入和读取文件
利用pickle 存储和读取文件 1.存储文件: #引入所需包,将列表元素存入data2的文件里面 import pickle mylist2 ={'1','nihao','之后','我们',1,2, ...
- 在phpWeChat中如何定义一个授权登录(获取昵称)的链接
在phpWeChat中如何定义一个授权登录(获取昵称)的超链接?使其点击后出现如下效果? 由于集成了这个功能,其实这个需要是很简单的. 假如您想在授权后跳转到http://www.baidu.com/ ...
- MAC OS 10.11.1虚拟机免费下载已安装Xcode7图片后有下载地址
MAC OS 10.11.1虚拟机免费下载已安装Xcode7图片后有下载地址 注意:已经下载过MAC OS 10.10.5虚拟机免费下载(可安装Xcode7)链接:http://www.cnblogs ...
- Hibernate.cfg.xml详解
在搭建Hibernate环境时需要配置Hibernate.cfg.xml配置文件,本文将想详细讲解配置文件的内容. 1.数据库连接信息 配置数据库驱动.(其中name为连接方式,我在这写jdbc的连接 ...
- codevs 1226 倒水问题
1226 倒水问题 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 有两个无刻度标志的水壶,分别可装 x 升和 y 升 ( x, ...
- Android Studio --> Gradle Build设置自动
ps:http://www.cnblogs.com/kangyi/p/4448398.html 应用场景 通常情况下我们的apps发布后也就是release模式下log是不显示的,debug模式下是显 ...
- Problem E: 深入浅出学算法006-求不定方程的所有解
Description 现有一方程ax+by=c,其中系数a.b.c均为整数,求符合条件的所有正整数解,要求按x由小到大排列,其中a b c 均为不大于1000的正整数 Input 多组测试数据,第一 ...