• 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'
    }
    ]
    }

      

    legend是echarts中的图例

  • 名称 类型 默认值 可选值 效果
    data Array [] 图例内容数组,数组项通常为{string},每一项代表一个系列的name,默认布局到达边缘会自动分行(列),传入空字符串”可实现手动分行(列)。 使用根据该值索引series中同名系列所用的图表类型和itemStyle,如果索引不到,该item将默认为没启用状态。 如需个性化图例文字样式,可把数组项改为{Object},指定文本样式和个性化图例icon

先来一个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'
}
]
}

  效果图如下:

    

echarts之legend-改变图例的图标为自定义图片的更多相关文章

  1. Echarts的legend改变图例图标为自定义图片

    当折线图时,legend默认时rect形式,如果需要改图例形状,可以自己设置legend的icon属性 legend: { icon:'stack' }, 1.自定义每个图例样式:为data的每个对象 ...

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

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

  3. Autorun.inf文件(2):改变硬盘分区图标

    改变F盘图标. 原理:在f盘下新建一个Autorun.inf文件,文件内容是 [AutoRun]icon=favicon.ico准备名为favicon.ico图标文件,将其放在工程目录里,设计程序将它 ...

  4. 使用Toolbar + DrawerLayou实现菜单侧滑,改变toolbar左上角图标

    侧边栏具体实现可以参照http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0303/2522.html getSupportActio ...

  5. C#之改变窗体icon图标、新建类文件、调用dll库

    一.改变窗体的图标 没有修改之前为: 修改之后为自己想要的图标: 需要在窗体Form1.cs属性里边添加icon图片文件: 二.新建cs类文件 如下图所示,新建一个类文件,我用于来调用库文件也可以来定 ...

  6. 百度地图api,点击标注,改变标注marker图标的链接地址

    改变选中的图标样式 // 选中高亮标注图片 let mapIcon = ‘./icon.png’; //标注点 let markerArrs = [{},{},....]; // 点击标注点 mark ...

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

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

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

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

  9. echarts仪表盘如何设置图例(legend)

    echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能: 不同段的颜色是通过axisLine->lineS ...

随机推荐

  1. Python爬虫入门教程 17-100 CSD*博客抓取数据

    写在前面 写了一段时间的博客了,忽然间忘记了,其实CSD*博客频道的博客也是可以抓取的,所以我干了..... 其实这事情挺简单的,打开CSDN博客首页,他不是有个最新文章么,这个里面都是最新发布的文章 ...

  2. oracle数据库之plsql可视化操作建表

    首先登录PL/SQL developer.   点击工具栏中的第一个图标,选择“表”.     右边会弹出一个窗口,我们以可视化方式来创建一个Table. 如下图所示,在“一般”选项卡中,输入“名称” ...

  3. Spring Cloud Eureka基本概述

    记一次Eureka的进一步学习. 一.Eureka简介 百科描述:Eureka是Netflix开发的服务发现框架,本身是一个基于REST的服务,主要用于定位运行在AWS域中的中间层服务,以达到负载均衡 ...

  4. groupcache源码解析-概览

    接下来讲什么 今天开始讲groupcache! Memcached大家应该都不陌生,官网的介绍是: Free & open source, high-performance, distribu ...

  5. Java线程Thread的状态解析以及状态转换分析 多线程中篇(七)

    线程与操作系统中线程(进程)的概念同根同源,尽管千差万别. 操作系统中有状态以及状态的切换,Java线程中照样也有. State 在Thread类中有内部类 枚举State,用于抽象描述Java线程的 ...

  6. MVC基本开发介绍 (1)列表展示

    前言: 现在如果用.net 的解决方案来做网站或者是网站的后台管理系统,MVC 应该是比较流行的. 自从进了新公司后,也一直在用mvc + webapi 来做项目,这里做个分享性的总结,有更好的方法欢 ...

  7. 【记录一次坑经历】axios使用x-www-form-urlencoded 服务器报400(错误的请求。 )(后端.Net MVC5 WebApi OAuth,前端Electron-Vue)

    首先放上源码 electron-vue axios 注册 import Vue from 'vue' import axios from 'axios'   axios.defaults.baseUR ...

  8. .Net Framework 4.5.1 ASP.NET MVC 5 下新建视图报“错误 运行所选代码生成器时出错 无法检索元数据 没有为该对象定义无参数构造函数”

    当在控制器中新建视图的时候,选择的视图界面如下: 执行添加后报如下错误: 错误的内容为: 错误运行所选代码生成器时出错 无法检索"XXX"的元数据没有为该对象定义无参数构造函数 U ...

  9. js中数组的map()方法

    map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值 map()方法按照原是数组顺序以此处理元素 注意:map()不会对空数组进行检测 :不会改变原始的数组 实例: var nu ...

  10. Django验证码【附源码】

    一.安装依赖 CentOS 第一步: yum install python-devel 第二步: yum install freetype-devel libjpeg-devel libpng-dev ...