echarts分段（一段一种颜色）显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="echarts.js"></script>
<script src="jquery-1.10.2.js"></script>
</head>
<body>
<div id="box" style="width:960px;height:500px;margin:0 auto;"></div>
<script>
var myChart = echarts.init(document.getElementById('box'));
$.get('aqi-beijing.json', function (data) {
myChart.setOption(option = {
title: {
text: 'Beijing AQI'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
data: data.map(function (item) {
return item[];
})
},
yAxis: {
splitLine: {
show: false
}
},
toolbox: {
left: 'center',
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [{
startValue: '2014-06-01'
}, {
type: 'inside'
}],
visualMap: {
top: ,
right: ,
pieces: [{
gt: ,
lte: ,
color: '#096'
}, {
gt: ,
lte: ,
color: '#ffde33'
}, {
gt: ,
lte: ,
color: '#ff9933'
}, {
gt: ,
lte: ,
color: '#cc0033'
}, {
gt: ,
lte: ,
color: '#660099'
}, {
gt: ,
color: '#7e0023'
}],
outOfRange: {
color: '#999'
}
},
series: {
name: 'Beijing AQI',
type: 'line',
data: data.map(function (item) {
return item[];
}),
markLine: {
silent: true,
data: [{
yAxis:
}, {
yAxis:
}, {
yAxis:
}, {
yAxis:
}, {
yAxis:
}]
}
}
});
});
</script>
</body>
</html>
demo链接：http://echarts.baidu.com/demo.html#line-aqi
api:http://echarts.baidu.com/option.html#visualMap-piecewise.pieces
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="echarts.js"></script>
</head>
<body>
<div id="box" style="width:960px;height:500px;margin:0 auto;"></div>
<script>
var weiChart = echarts.init(document.getElementById('box'));
var data1=[, , , "-", "-", "-", "-"];
var data2=["-", "-", , , , "-", "-"];
var data3=["-", "-", "-", "-", , , ];
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'',
type:'line',
data:data1
},
{
name:'',
type:'line',
data:data2
},
{
name:'',
type:'line',
data:data3
}, ]
};
weiChart.setOption(option);
</script>
</body>
</html>
echarts分段（一段一种颜色）显示的更多相关文章
- 【编程题目】一串首尾相连的珠子(m 个)，有 N 种颜色(N<=10)，取出其中一段，要求包含所有 N 中颜色，并使长度最短。
40.百度研发笔试题 2)一串首尾相连的珠子(m 个),有 N 种颜色(N<=10),设计一个算法,取出其中一段,要求包含所有 N 中颜色,并使长度最短.并分析时间复杂度与空间复杂度. 思路: ...
- Html+Css+Js_之table每隔3行显示不同的两种颜色
<html> <head> <script type="text/javascript"> /** 最近因项目的需求,有这样的一个问题: 一个t ...
- Android代码中设置字体大小，字体颜色，显示两种颜色.倒计时效果
Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...
- Android TextView里显示两种颜色
今天介绍一个小技巧,在Android的TextView里设置两种颜色,直接上代码: TextView TV = (TextView)findViewById(R.id.mytextview01); S ...
- 魅蓝Note有几种颜色 魅蓝Note哪个颜色好看
http://www.pc841.com/shoujizhishi/39882.html http://news.mydrivers.com/1/359/359443.htm 魅族发布首款千元高性价比 ...
- echarts x轴标签文字过多导致显示不全
原文电梯:https://blog.csdn.net/kebi007/article/details/68488694 echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.a ...
- 一个label两种颜色，一个label两种字体
-(void)addLabel{ UILabel *label = [[UILabel alloc]init]; label.backgroundColor = [UIColor grayColor] ...
- APP界面常用的五种颜色搭配
众所周知,每一种颜色带给用户的视觉感受也是不同的.现在人们对手机的依赖程度,就能看到手机中APP的发展前景,那今天就跟大家聊聊如何通过颜色搭配的不同来进行移动端APP界面的布局和排版设计.移动端UI界 ...
- YTU 2629: E1 一种颜色，三个分量
2629: E1 一种颜色,三个分量 时间限制: 1 Sec 内存限制: 128 MB 提交: 300 解决: 226 题目描述 在计算机中,常用三种基色红(R).绿(G).蓝(B)的混合来表示颜 ...
随机推荐
- springmvc配置式开发下的视图解析器
多个视图解析器优先级:
- 前端页面给指定的div添加遮罩层，并且带有加载中的小旋转图片
话不多说,先上代码,其实还是比较简单的 $("<div id='shade' style='opacity:0.85;background:white'></div> ...
- SpringMVC_01 SpringMVC五大组件、SpringMVC编程步骤（不使用注解进行配置）、SpringMVC编程步骤（利用注解进行配置）、参数获取、响应数据
1 什么是SpringMVC 是一个mvc框架,用来简化基于mvc架构的web应用程序的 开发. 2 SpringMVC五大组件 DispatcherServlet (前端控制器) HanlderMa ...
- 30-盐水(分段dfs)
链接:https://www.nowcoder.com/acm/contest/94/K来源:牛客网 时间限制:C/C++ 5秒,其他语言10秒 空间限制:C/C++ 131072K,其他语言2621 ...
- JavaPersistenceWithHibernate第二版笔记-第七章-001Mapping a set(@ElementCollection、@CollectionTable、@JoinColumn、)
一.结构 二.代码 1. package org.jpwh.model.collections.setofstrings; import org.jpwh.model.Constants; impor ...
- R: 关于文件 文件夹的处理：file.show() dir.create().....
文件管理主要函数: setwd( ):设定R软件当前工作目录.getwd( ):查看R软件当前工作目录.list.files( ): 查看当前目录下文件.file.show( ): 显示文件.file ...
- Luogu 2827 [NOIP2016] 蚯蚓
原来真的是按题意模拟啊,还以为有高能的算法可以直接算每个$t$的值. 考虑到先切的蚯蚓一定比后切的蚯蚓长,于是可以弄三个队列分别存放原来的序列和两个切开后的序列,每次取出三个队头的最大值进行扩展. 考 ...
- 《Effective Java》第6章 枚举和注解
第30条:用enum代替int常量 将加班工资计算移到一个私有的嵌套枚举中,将这个策略枚举(strategy enum)的实例传到PayrollDay枚举的构造器中.之后PayrollDay枚举将加班 ...
- 2019年第十届蓝桥杯省赛总结（JavaA组）
//update3.28:省一rank4,莫名进了国赛好神奇.. 记yzm10第一次体验A组(纯粹瞎水). 早闻山东的JavaA组神仙打架,进国赛都成了奢望(往年只有五个名额),因此抱着做分母的心态来 ...
- Android手游外挂入侵----寓攻于守，方能破敌
欢迎访问网易云社区,了解更多网易技术产品运营经验. 手游外挂入侵 随着各种爆款手游的风靡,目前手机游戏的占比用户已经形成一个巨大的市场,市场上你争我夺,有将PC版本移植到手机中,也有新模式手游的推出. ...