使用Echarts3实现动态折线图

#1引入Echarts及地图文件

*1）下载Echarts JS库文件及地图文件

Echarts库下载地址 http://echarts.baidu.com/download.html

#2绘制折线图

*1）准备DOM容器，并设置高度和宽度为100%

 <!DOCTYPE html> <html style="height:100%;"> <head>     <meta charset="utf-8">     <!-- 引入 ECharts 文件 -->     <script src="echarts.min.js"></script> </head> <body style="height:100%;">     <div id="main" style="width:100%;height:100%;"></div> </body> </html>

*2）准备虚构随机数据，实际由接口获取

var getData = [     {"month":"2017-07","count":6},{"month":"2017-08","count":2},{"month":"2017-09","count":0},     {"month":"2017-10","count":0},{"month":"2017-11","count":6},{"month":"2017-12","count":1},     {"month":"2018-01","count":4},{"month":"2018-02","count":5},{"month":"2018-03","count":2},     {"month":"2018-04","count":2},{"month":"2018-05","count":0},{"month":"2018-06","count":3},     {"month":"2018-07","count":3},{"month":"2018-08","count":2},{"month":"2018-09","count":4},     {"month":"2018-10","count":5},{"month":"2018-11","count":5},{"month":"2018-12","count":3},     {"month":"2019-01","count":3},{"month":"2019-02","count":0},{"month":"2019-03","count":0}]

*3）基于准备好的dom，初始化echarts实例

 var chart = echarts.init(document.getElementById('main'));

*4）指定图表的配置项

index = 7; option = {     tooltip : {         trigger: 'axis'     },     xAxis : [{         type : 'category',         boundaryGap : false,         data : function (){             var list = [];                 for (var i = 0; i < index; i++) {                     list.push(getData[i].month);                 }                 return list;         }()     }],     yAxis : [{         type : 'value'     }],     series : [{         name:'',         type:'line',         smooth: true,         data:function (){             var list = [];             for (var i = 0; i < index; i++) {                 list.push(getData[i].count);             }             return list;         }()     }] };

*5）使用指定的配置项和数据显示图表

 chart.setOption(option);

*6）使用定时器设置动态效果

	setInterval(function (){ 		if (index == getData.length -1) { 			index = 0; 		} 		var data = option.series[0].data; 		data.shift(); 		data.push(getData[index].count); 		option.xAxis[0].data.shift(); 		option.xAxis[0].data.push(getData[index++].month); 		myChart.setOption(option); 	}, 2000);

#3完整代码及效果

*1）完整代码

 <!DOCTYPE html> <html style="height:100%;"> <head>     <meta charset="utf-8">     <script src="echarts.min.js"></script> </head> <body style="height:100%;">     <div id="main" style="width:100%;height:100%;"></div>     <script> 	var getData = [ 		{"month":"2017-07","count":6},{"month":"2017-08","count":2},{"month":"2017-09","count":0}, 		{"month":"2017-10","count":0},{"month":"2017-11","count":6},{"month":"2017-12","count":1}, 		{"month":"2018-01","count":4},{"month":"2018-02","count":5},{"month":"2018-03","count":2}, 		{"month":"2018-04","count":2},{"month":"2018-05","count":0},{"month":"2018-06","count":3}, 		{"month":"2018-07","count":3},{"month":"2018-08","count":2},{"month":"2018-09","count":4}, 		{"month":"2018-10","count":5},{"month":"2018-11","count":5},{"month":"2018-12","count":3}, 		{"month":"2019-01","count":3},{"month":"2019-02","count":0},{"month":"2019-03","count":0}] 	var index = 7; 	var option = { 		tooltip : { 			trigger: 'axis' 		}, 		xAxis : [{ 			type : 'category', 			boundaryGap : false, 			data : function (){ 				var list = []; 					for (var i = 0; i < index; i++) { 						list.push(getData[i].month); 					} 					return list; 			}() 		}], 		yAxis : [{ 			type : 'value' 		}], 		series : [{ 			name:'', 			type:'line', 			smooth: true, 			data:function (){ 				var list = []; 				for (var i = 0; i < index; i++) { 					list.push(getData[i].count); 				} 				return list; 			}() 		}] 	};      	var myChart = echarts.init(document.getElementById('main'));     myChart.setOption(option); 	setInterval(function (){ 		if (index == getData.length -1) { 			index = 0; 		} 		var data = option.series[0].data; 		data.shift(); 		data.push(getData[index].count); 		option.xAxis[0].data.shift(); 		option.xAxis[0].data.push(getData[index++].month); 		myChart.setOption(option); 	}, 2000);     </script> </body> </html>

*2）效果图