option = {
legend: {
orient: 'horizontal', // 'vertical'
x: 'right', // 'center' | 'left' | {number},
y: 'top', // 'center' | 'bottom' | {number}
backgroundColor: '#eee',
borderColor: 'rgba(178,34,34,0.8)',
borderWidth: 4,
padding: 10, // [5, 10, 15, 20]
itemGap: 20,
textStyle: {color: 'red'},
selected: {
'降水量' : false
},
data: [
{
name:'蒸发量',
icon : 'image://../asset/ico/favicon.png',
textStyle:{fontWeight:'bold', color:'green'}
},
'降水量','最高气温', '最低气温'
]
},
xAxis :{
data : ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} ml'
}
},
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
},
splitLine : {show : false}
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
},
{
name:'最高气温',
type:'line',
yAxisIndex: 1,
data:[11, 11, 15, 13, 12, 13, 10]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
}
]
};
// 动态添加默认不显示的数据
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.LEGEND_SELECTED, function (param){
var selected = param.selected;
var len;
var added;
if (selected['最低气温']) {
len = option.series.length;
added = false;
while (len--) {
if (option.series[len].name == '最低气温') {
// 已经添加
added = true;
break;
}
}
if (!added) {
myChart.showLoading({
text : '数据获取中',
effect: 'whirling'
});
setTimeout(function (){
option.series.push({
name:'最低气温',
type:'line',
yAxisIndex: 1,
data:[-2, 1, 2, 5, 3, 2, 0]
});
myChart.hideLoading();
myChart.setOption(option);
}, 2000)
}
}
});

参考地址:http://echarts.baidu.com/echarts2/doc/example/legend.html

如果这篇文章对您有帮助,您可以打赏我

技术交流QQ群:15129679

echart 图例设置自定义图标?的更多相关文章

  1. Assign a Custom Image 设置自定义图标

    In this lesson, you will learn how to associate a business class with a custom image. This image wil ...

  2. 关于在Safari浏览器中将网页添加到主屏幕的相关设置(自定义图标,启动动画,自定义名称)

    在ios中我们可以使用Safari浏览自带的将网页添加到主屏幕上,让我们的web页面看起来像native那样 第一步: 第二步: 第三步: 到这里还没结束:我们还要进行相关设置才能使我们的应用更像原生 ...

  3. 百度地图api设置点的自定义图标不显示

    百度地图api设置点的设置代码为: var myIcon = new BMap.Icon(): 所以首先要找到这行代码,并在括号中加上图片信息: var myIcon = new BMap.Icon( ...

  4. [DevExpress]treeList1背景色设置与自定义图标

    为了和系统界面一致改成透明色: treeList1.BackColor = Color.Transparent; treeList1.Appearance.Empty.BackColor = Colo ...

  5. Windows 8.1——将网站固定到开始菜单,自定义图标、颜色和Windows推送通知

    记得在IE 9和Windows 7刚出来那会儿我写过一篇文章来介绍如何自定义网站将其固定到Windows的任务栏上,同时自定义图标及任务内容.那个功能在IE 9中被称之为JumpList.http:/ ...

  6. Delphi 7使用自定义图标关联文件类型

    Delphi 7使用自定义图标关联文件类型 5.2 Delphi编程(40)  版权声明:本文为博主原创文章,未经博主允许不得转载. 在开发过程中,我们经常需要属于自己的文件类型,自定义的后缀名不仅可 ...

  7. 将网站固定到开始菜单,自定义图标、颜色和Windows推送通知

    Windows 8.1——将网站固定到开始菜单,自定义图标.颜色和Windows推送通知 记得在IE 9和Windows 7刚出来那会儿我写过一篇文章来介绍如何自定义网站将其固定到Windows的任务 ...

  8. ionic2 +Angular 使用自定义图标

    结合阿里巴巴矢量图标库实现在ionic2开发中使用自定义图标. step1:在阿里巴巴图标管理中新建项目,并添加自己选中的图标到购物车: step2:将购物车中的图标"添加至项目" ...

  9. C# Note15:设置Window图标的正确方式

    Windows Presentation Foundation(WPF)独立应用程序有两种类型的图标: 一个程序集(assembly) 图标,通过在应用程序的项目构建文件中使用<Applicat ...

随机推荐

  1. Keil debugging techniques and alternative printf (SWO function)

    One of the basic needs of the embedded software development through the terminal to output debugging ...

  2. stm32 优先级说明

    抢占优先级和响应优先级.事实上是一个中断所包括的两个优先级,当中前者是对抢占优先级的级别划分,后者是同样抢占优先级的优先级别的划分. 比方: 中断A抢占优先级比B高,那么A的中断能够在B里面触发,忽略 ...

  3. 统计代码执行时间,使用Stopwatch和UserProcessorTime的区别

    当我们需要统计一段代码的执行时间,首先想到的可能是Stopwatch类.在这里,先暂不使用Stopwatch,自定义一个统计代码执行时间的类,大致需要考虑到: 1.确保统计的是当前进程.当前线程中代码 ...

  4. 使用 MVVMLight 绑定数据(转)

    MVVMLight绑定数据示例 好了,我们在新建了两个项目,分别是“MVVMLight的主程序” 与  “Model层”,运行的效果及解决方案结构如下: 其实很简单,就是绑定了一个数据源而已,编写的代 ...

  5. 初步理解JWT并实践使用

    原文:https://www.jianshu.com/p/2fdc20a42c41 JWT是一种用于双方之间传递安全信息的简洁的.URL安全的表述性声明规范.JWT作为一个开放的标准(RFC 7519 ...

  6. spring-boot项目在eclipse中指定配置文件启动

    原文:https://blog.csdn.net/ztx114/article/details/80076339 如下图我的项目有三个配置文件,假如我向指定用application-test.yml启 ...

  7. iPhone/iPad各种文件路径详解 帮助了解自己的iphone和ipad

    以下内容皆为转载分享iPhone里重要的目录路径有哪几个? 1. /private/var/mobile 新刷完的机器,要在这个文件夹下建一个Documents的目录,很多程序都要用到. 2. /pr ...

  8. 删除数据库字段一样的row, 并增加唯一索引

    DELETE FROM `groups` WHERE name IN (select a.name from ( SELECT name FROM `groups` GROUP BY name HAV ...

  9. SVG.js Mask覆盖和ClipPath裁剪

    一.SVG.Mask 覆盖物设置 1. var draw = SVG('svg1').size(300, 300); //SVG.Mask 覆盖物设置 var ellipse = draw.ellip ...

  10. Spearman Rank(斯皮尔曼等级)相关系数

    转自:http://blog.csdn.net/wsywl/article/details/5859751 1.简介 在统计学中,斯皮尔曼等级相关系数以Charles Spearman命名,并经常用希 ...