当折线图时,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. LeetCode 118. 杨辉三角

    118. 杨辉三角 给定一个非负整数numRows,生成杨辉三角的前numRows行. 在杨辉三角中,每个数是它左上方和右上方的数的和. 示例 输入: 5 输出: [ [1], [1,1], [1,2 ...

  2. Webpack, VSCode 和 Babel 组件模块导入别名

    很多时候我们使用别人的库,都是通过 npm install,再简单的引入,就可以使用了.     1 2 import React from 'react' import { connect } fr ...

  3. 洛谷P1291 [SHOI2002]百事世界杯之旅 [数学期望]

    题目传送门 百事世界杯之旅 题目描述 “……在2002年6月之前购买的百事任何饮料的瓶盖上都会有一个百事球星的名字.只要凑齐所有百事球星的名字,就可参加百事世界杯之旅的抽奖活动,获得球星背包,随声听, ...

  4. 如何制作RTS游戏的寻路系统?

    Q1:我们在做一个RTS游戏,开始用的是Unity自带的NavMesh的寻路,但发现这个并不适合RTS多人寻路,因为总会出现阻挡和闪跳的问题.看Asset Store上的A* path插件评论说在碰撞 ...

  5. 在phpWeChat里生成一个临时二维码(非微信二维码)

    phpWeChat作为支持Pc+H5开发的管理系统,内置一套二维码生成API,访问地址: 您的域名/api/qrcode/index.php?data=二维码数据 以下为使用示例 使用时有一点需要注意 ...

  6. xss可用事件

    onabort onafterprint onbeforeprint onbeforeunload onblur oncanplay oncanplaythrough onchange onclick ...

  7. 【洛谷比赛】[LnOI2019]长脖子鹿省选模拟赛 T1 题解

    今天是[LnOI2019]长脖子鹿省选模拟赛的时间,小编表示考的不怎么样,改了半天也只会改第一题,那也先呈上题解吧. T1:P5248 [LnOI2019SP]快速多项式变换(FPT) 一看这题就很手 ...

  8. 【centos 7】搭FTP服务和web访问

    步骤:安装 vsftpd-->增加用户-->配置vsftpd和用户权限 -->配置iptables 安装httpd,开放http访问 /var/tmp/user1下目录 1.安装和用 ...

  9. Codeforces 1129 E.Legendary Tree

    Codeforces 1129 E.Legendary Tree 解题思路: 这题好厉害,我来复读一下官方题解,顺便补充几句. 首先,可以通过询问 \(n-1​\) 次 \((S=\{1\},T=\{ ...

  10. Java后台直接生成二维码介绍

    Java后台直接生成二维码 1.其实jquery也可以直接生成二维码的,但我测试的时候,二维码生成后太模糊,难以识别.所以在这里介绍在后来生成二维码的方式. 2.不善于文字描述,直接上代码了. imp ...