当折线图时,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改变图例图标为自定义图片的更多相关文章

  1. echarts之legend-改变图例的图标为自定义图片

    legend:{ show:true, orient:'horizontal', borderColor:'#df3434', borderWidth:2, data:[ { name:'蒸发量', ...

  2. 【随笔】设置title标题图标为自定义图片

    第一步: 利用图标工具(有很多)制作图标文件(favicon.ico)上传到网站所在的服务器的根目录下,这个文件必须是16*16大小的图标文件. 第二步: 在<head></head ...

  3. Visual Studio 2015 改变窗体图标 & 任意位置打开窗体 & 禁止鼠标改动窗体大小

    1.改变窗体图标 先把图标放到项目文件夹中,然后点击窗体属性的ICON添加即可. 参考:https://www.cnblogs.com/yangxuli/p/8075484.html?tdsource ...

  4. React native 之android的图标和启动图片

    哎哎呀呀,上篇说到了react native的IOS的图标和启动图片的设置,其实最主要的是尺寸!相应的尺寸设定好了以后就不会报错了! ok~这篇说的是React native的android的图标和启 ...

  5. react-native android app名字 app包名、图标和启动图片设置

    1.设置名字 打开 android/app/src/main/res/values/strings.xml 如图,进行修改即可 2.设置图标,最简单可以直接替换,其他后在看 在上图中几个文件夹中都有一 ...

  6. angularjs1 自定义图片查看器(可旋转、放大、缩小、拖拽)

    笔记: angularjs1 制作自定义图片查看器(可旋转.放大.缩小.拖拽) 2018-01-12 更新  可以在我的博客  查看我 已经封装好的 纯 js写的图片查看器插件    博客链接 懒得把 ...

  7. AJ学IOS(44)之网易彩票自定义图片在右边的Button_弹出view_ios6,7简单适配

    AJ分享,必须精品 效果: 注意图里面了吗,其实那个效果做起来真的很简单,在iOS中苹果给我们封装的很好,关键是那个按钮 系统的按钮的图片是在左边的,这里我们需要把他调整到右边,然后呢需要我们自己做一 ...

  8. iOS获取app图标和启动图片名字(AppIcon and LaunchImage's name)

    在某种场景下,可能我们需要获取app的图标名称和启动图片的名称.比如说app在前台时,收到了远程通知但是通知栏是不会有通知提醒的,这时我想做个模拟通知提示,需要用到icon名称:再比如在加载某个控制器 ...

  9. 网页qq客服代码并自定义图片

    <script>var online= new Array();</script> <script src="http://webpresence.qq.com ...

随机推荐

  1. nhibernate 比较运算符

    比较运算符 HQL运算符 QBC运算符 含义 = Restrictions.eq() 等于 <> Restrictions.not(Exprission.eq()) 不等于 > Re ...

  2. postman自动生成签名

    查看详细图文教程↓ 一.全局变量方式 1. 在全局变量添加key:value分别是autoSign和var sign={toUnicode:function(s){return s.replace(/ ...

  3. thinkphp5.0生命周期

    本篇内容我们对ThinkPHP5.0的应用请求的生命周期做大致的介绍,以便于开发者了解整个执行流程. 1.入口文件 用户发起的请求都会经过应用的入口文件,通常是 public/index.php文件. ...

  4. 《java虚拟机》----线程安全和锁优化

    No1: 线程安全:当多个线程访问一个对象时,如果不用考虑这些线程在运行环境下的调度和交替执行,也不需要进行额外的同步,或者在调用方进行任何其他的协调操作,调用这个对象的行为都可以获得正确的结果,那这 ...

  5. /.nav-tabs :是普通标签页 .nav-pills:胶囊式标签页 action ;默认的激活项,给<li>加默认显示的是哪个标签页内容 .nav是标签页的一个基类,给ul加 .nav-stacked: 垂直排列BootStrap

    <meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no ...

  6. java项目日志系统的总结

    目录 日志系统归类以及关系 日志的三个组件 slf4j的使用 项目中构建日志系统 使用例子 日志系统归类以及关系 常用的日志框架: slf4j.logback .log4j.log4j2.JUL(ja ...

  7. NetCore在Centos7上部署和Nginx集群部署访问

    NetCore在Linux上部署 工具:WMWare虚拟机,Wmware12,CentOS7ISO镜像,VS2017 1.安装虚拟机,过程略,网上一搜一大把 2.用VS2017建一个NetCore的W ...

  8. iOS 9音频应用播放音频之第一个ios9音频实例

    iOS 9音频应用播放音频之第一个ios9音频实例 第一个ios9音频实例 为了让开发者可以对上面的内容有更加深入的了解,本节将实现播放音频的第一个实例.在此实例中会涉及到项目的创建.界面设计.关联以 ...

  9. FastReport.Net使用:[24]其他控件(邮政编码(Zip Code),网格文本(Cellular Text)以及线性刻度尺(Linear Gauge))

    邮政编码(Zip Code) Zip Code仅支持数字(0~9) Zip Code支持数据列绑定,表达式,文本等模式 可通过修改SegmentCount属性的值来确定Zip Code的位数. 数字右 ...

  10. 【BZOJ 3235】 3235: [Ahoi2013]好方的蛇 (单调栈+容斥原理)

    3235: [Ahoi2013]好方的蛇 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 187  Solved: 95 Description 有一天, ...