<!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分段（一段一种颜色）显示的更多相关文章
	

    
								
  1. 【编程题目】一串首尾相连的珠子(m 个)，有 N 种颜色(N<=10)，取出其中一段，要求包含所有 N 中颜色，并使长度最短。
		
    40.百度研发笔试题 2)一串首尾相连的珠子(m 个),有 N 种颜色(N<=10),设计一个算法,取出其中一段,要求包含所有 N 中颜色,并使长度最短.并分析时间复杂度与空间复杂度. 思路:  ...
    
		
    2. 
						
  2. Html+Css+Js_之table每隔3行显示不同的两种颜色
		
    <html> <head> <script type="text/javascript"> /** 最近因项目的需求,有这样的一个问题: 一个t ...
    
		
    3. 
						
  3. Android代码中设置字体大小，字体颜色，显示两种颜色.倒计时效果
		
    Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...
    
		
    4. 
						
  4. Android TextView里显示两种颜色
		
    今天介绍一个小技巧,在Android的TextView里设置两种颜色,直接上代码: TextView TV = (TextView)findViewById(R.id.mytextview01); S ...
    
		
    5. 
						
  5. 魅蓝Note有几种颜色 魅蓝Note哪个颜色好看
		
    http://www.pc841.com/shoujizhishi/39882.html http://news.mydrivers.com/1/359/359443.htm 魅族发布首款千元高性价比 ...
    
		
    6. 
						
  6. echarts x轴标签文字过多导致显示不全
		
    原文电梯:https://blog.csdn.net/kebi007/article/details/68488694 echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.a ...
    
		
    7. 
						
  7. 一个label两种颜色，一个label两种字体
		
    -(void)addLabel{ UILabel *label = [[UILabel alloc]init]; label.backgroundColor = [UIColor grayColor] ...
    
		
    8. 
						
  8. APP界面常用的五种颜色搭配
		
    众所周知,每一种颜色带给用户的视觉感受也是不同的.现在人们对手机的依赖程度,就能看到手机中APP的发展前景,那今天就跟大家聊聊如何通过颜色搭配的不同来进行移动端APP界面的布局和排版设计.移动端UI界 ...
    
		
    9. 
						
  9. YTU 2629: E1 一种颜色，三个分量
		
    2629: E1 一种颜色,三个分量 时间限制: 1 Sec  内存限制: 128 MB 提交: 300  解决: 226 题目描述 在计算机中,常用三种基色红(R).绿(G).蓝(B)的混合来表示颜 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. sql server导入excel等数据
			
    1.首先打开并登陆sql server数据库 2.选择要将表导入的数据库,右击选择任务-->导入数据 3.在弹出的窗口中选择下一步 4.在弹出的窗口中选择数据源,也就是从哪种文件导入,sql s ...
    
			
    2. 
						
  2. 【WebRTC】简介
			
    WebRTC 名称源自网页实时通信(英语:Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的API.它于2011年6月1日开源并在Goog ...
    
			
    3. 
						
  3. __call()和__callStatic()方法
			
    __call() 当对象访问不存在的方法时,__call()方法会被自动调用__callStatic() 当对象访问不存在的静态方法时,__callStatic()方法会被自动调用 这两个方法在PHP ...
    
			
    4. 
						
  4. PCL—点云分割（最小割算法） 低层次点云处理
			
    1.点云分割的精度 在之前的两个章节里介绍了基于采样一致的点云分割和基于临近搜索的点云分割算法.基于采样一致的点云分割算法显然是意识流的,它只能割出大概的点云(可能是杯子的一部分,但杯把儿肯定没分割出 ...
    
			
    5. 
						
  5. 算法Sedgewick第四版-第1章基础-2.1Elementary Sortss-002插入排序法(Insertion sort)
			
    一.介绍 1.时间和空间复杂度 运行过程 2.特点: (1)对于已排序或接近排好的数据,速度很快 (2)对于部分排好序的输入,速度快 二.代码 package algorithms.elementar ...
    
			
    6. 
						
  6. EZOJ #73
			
    传送门 分析 我们知道如果对于模数$P$有$gcd(x,P) = 1$则$x$一定有且仅有一个逆元,可以表示为 $x \equiv \frac{y}{1} (mod P)$ 即为$xy \equiv  ...
    
			
    7. 
						
  7. HUB和Switch
			
    http://baike.baidu.com/view/600161.htm 当然交换机的功能还不止如此,它可以把网络拆解成网络分支.分割网络数据流,隔离分支中发生的故障,这样就可以减少每个网络分支的 ...
    
			
    8. 
						
  8. Linux sogou input method
			
    afda@afda-Y720-15IKB:~$ wget "http://pinyin.sogou.com/linux/download.php?f=linux&bit=64&quo ...
    
			
    9. 
						
  9. “网易大数据讲堂第一期：数说”直播活动资料：课程回放收看及PPT下载
			
    欢迎访问网易云社区,了解更多网易技术产品运营经验. "网易大数据讲堂第一期:数说"直播活动昨晚顺利举行.感谢各位"数"友的支持和参与. 本次活动PPT可点击这里 ...
    
			
    10. 
						
  10. 【2】循序渐进学 Zabbix：安装配置 Zabbix Server 服务端
			
    上一篇 [1]循序渐进学 Zabbix :初识与基础依赖环境搭建( LNMP ) 安装 Zabbix Server 上篇我们在 192.168.200.101 上面安装了 Zabbix 所依赖的 LN ...
    
			
    11.