<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!--<script type="text/javascript" src="jquery.js"></script>--> <script type="text/javascript" src="js/echarts.js"></script> <body> <div id="main" style="width: 600px;height:400px;"></div> </body> </html> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); function randomData() { now = new Date(+now + oneDay); value = value + Math.random() * 21 - 10; return { name: now.toString(), value: [ [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'), Math.round(value) ] } } var data = []; var now = +new Date(1997, 9, 3); var oneDay = 24 * 3600 * 1000; var value = Math.random() * 1000; for(var i = 0; i < 1000; i++) { data.push(randomData()); } option = { title: { text: '动态数据 + 时间坐标轴' }, tooltip: { trigger: 'axis', formatter: function(params) { params = params[0]; var date = new Date(params.name); return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1]; }, axisPointer: { animation: false } }, xAxis: { type: 'time', splitLine: { show: false } }, yAxis: { type: 'value', boundaryGap: [0, '100%'], splitLine: { show: false } }, series: [{ name: '模拟数据', type: 'line', showSymbol: false, hoverAnimation: false, data: data, markLine: { itemStyle: { normal: { borderWidth: 1, lineStyle: { type: "dash", color: 'red', width: 2 }, label: { formatter: 'COD', textStyle: { fontSize: 16, fontWeight: "bolder" } }, show: true, color: '#4c5336' } }, data: [{ yAxis: 900 }] }, }], }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); setInterval(function() { for(var i = 0; i < 5; i++) { data.shift(); data.push(randomData()); } myChart.setOption({ series: [{ data: data }] }); }, 1000); </script>