echarts.js学习

分阶段渐变的效果，个人觉得不是很实用

   
   

<script src="js/echarts.js"></script>




 
   
   

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
		// 引入 ECharts 主模块
		option = {
	
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['直接访问','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '3%',
        bottom: '4%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [      
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            data:[],
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0,0,0,1,
						[
							{offset: 0,color: 'red'},
							{offset: 1,color: 'blue'}
						]
					)
				}	
			}
        },
		{
            name:'直接访问',
            type:'line',
            stack: '总量',
            data:[],
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0,0,0,1,
						[
							{offset: 0,color: 'red'},
							{offset: 1,color: 'green'}
						]
					)
				}	
			}
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            data:[],
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0,0,0,1,
						[
							{offset: 0,color: 'green'},
							{offset: 1,color: 'blue'}
						]
					)
				}	
			}
        },
		{
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            data:[],
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0,0,0,1,
						[
							{offset: 0,color: 'green'},
							{offset: 1,color: 'yellow'}
						]
					)
				}	
			}
        }
    ]
};



        // 使用刚指定的配置项和数据显示图表。
        if (option && typeof option === "object") {
			var startTime = +new Date();
			option.series[0].data = [40, 400, 600, 800, 900,'-','-'];
			option.series[1].data = ['-','-','-','-',0,1000,1200];
			option.series[2].data = [40, 100, 100, 100, 100,'-','-'];
			option.series[3].data = ['-','-','-','-',0,100,100];
			myChart.setOption(option, true);
		}
    </script>

上一个是x轴的分阶段渐变，下面是一个y轴分阶段的渐变，区域也是分阶段的渐变，也可以在visualMap里设置阶段颜色，可以这里没有分阶段渐变，而且visualMap优先级好像比其他的高，所以下面没有设置visualMap

    
    

<script src="js/echarts.js"></script>




    
    

<script>
var myChart = echarts.init(document.getElementById('main'));

option = {
    title: {
        text: '一天用电量分布',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {}
        }
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} W'
        },
        axisPointer: {
            snap: true
        }
    },
    series: [
        {
            name:'用电量',
            type:'line',
            smooth: true,
            data: [10, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
            markArea: {
                data: [ [{
						name: '极低',
						yAxis: 0,
						itemStyle: {
							normal: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
											offset: 0, color: 'yellow'
										},{
											offset: 1, color: 'green'
										}],
									globalCoord: true
								},
								opacity: 0.5							}
						}
						},{
						yAxis:200
					}],
					[{
                    name: '低消耗',
                    yAxis: 200,
					itemStyle: {
						normal: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0, color: 'red' // 0% 处的颜色
								}, {
									offset: 1, color: 'blue' // 100% 处的颜色
								}],
								globalCoord: true // 缺省为 false
							},
							opacity: 0.5
						}
					}
                }, {
                    yAxis: 400
                }],
				[{
					name: '正常',
					yAxis: 400,
					itemStyle: {
						normal: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0, color: 'green' // 0% 处的颜色
								}, {
									offset: 1, color: 'red' // 100% 处的颜色
								}],
								globalCoord: true // 缺省为 false
							},
							opacity: 0.5
						}
					}
				},{
					yAxis: 600
				}], 
				[{
                    name: '高消耗',
                    yAxis: 600,
					itemStyle: {
						normal: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0, color: 'blue' // 0% 处的颜色
								}, {
									offset: 1, color: 'green' // 100% 处的颜色
								}],
								globalCoord: true // 缺省为 false
							},
							opacity: 0.5
						}
					}
                }, {
                    yAxis: 800
                }] ]
            },
			itemStyle: {
				normal: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0, color: 'blue' // 0% 处的颜色
						}, {
							offset: 0.25, color: 'red' // 100% 处的颜色
						},{
							offset: 0.5, color: 'green'
						},{
							offset: 0.75, color: 'yellow'
						},{
							offset: 1, color: 'red'
						}],
						globalCoord: true // 缺省为 false
					}
				}
			}
        }
    ]
};

myChart.setOption(option);
</script>

echarts还是很好用的，根据api去配置相应的效果就可以了。