1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" /> 6 <title>ECharts True time </title> 7 <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script> 8 </head> 9 <body> 10 <div id="main" style=" 100vw;height:300px;"></div> 11 <script type="text/javascript"> 12 // 基于准备好的dom，初始化echarts实例 13 var myChart = echarts.init(document.getElementById('main')); 14 15 // 指定图表的配置项和数据 16 var option = { 17 /* tooltip: { 18 trigger: 'axis' 19 }, */ 20 /* legend: { 21 data: ['随机', '变量'] 22 }, */ 23 /* toolbox: { 24 show: true, 25 feature: { 26 dataView: { 27 readOnly: false 28 }, 29 restore: {}, 30 saveAsImage: {} 31 } 32 }, */ 33 /* dataZoom: { 34 show: false, 35 start: 0, 36 end: 100 37 }, */ 38 xAxis: [{ 39 type: 'category', 40 // boundaryGap: true,//是否贴轴显示值,默认:true(不贴轴显示) 41 data: (function() {//x轴显示的值 42 var now = new Date(); 43 var res = []; 44 var len = 10;//x轴上可显示10个值 45 while (len--) { 46 res.unshift(now.toLocaleTimeString().replace(/^D*/, '')); 47 now = new Date(now - 2000); 48 } 49 return res; 50 })() 51 }], 52 yAxis: [{ 53 type: 'value', 54 // scale: true, 55 name: '随机', 56 // max: 20,//给定坐标最高值 57 min: 0,//给定坐标最低值 58 boundaryGap: [0.2, 0.2] 59 }, { 60 type: 'value', 61 // scale: true, 62 name: '变量', 63 min: 0,//给定坐标最低值 64 boundaryGap: [0.2, 0.2] 65 }], 66 series: [{ 67 name: '变量', 68 type: 'bar',//图表值的显示类型 69 //symbol: 'none',//值的圈圈,在line中看效果 70 yAxisIndex: 1,//表示有两个y轴(默认从0开始算) 71 itemStyle: {normal: { 72 color:'green', 73 // lineStyle:{color:'gold'} //线的颜色 74 }}, 75 data: (function() { 76 var res = []; 77 var len = 10;//第一个值显示的位置 78 while (len--) {//上面的while循环与下面的while循环达到的结果一样 79 res.push(null); 80 } 81 return res; 82 })() 83 }, { 84 name: '随机', 85 type: 'line',//图表值的显示类型 86 smooth:true,//是否使线条变得平滑,默认:false 87 // itemStyle areaStyle 成为面积图的关键。 88 itemStyle: {normal: { 89 color:'blue', 90 // areaStyle: {type: 'default'}, 91 // lineStyle:{color:'gold'} //线的颜色 92 }}, 93 areaStyle: {// 实现蓝白渐变色 94 normal: { 95 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 96 offset: 0, 97 color: 'blue' 98 }, { 99 offset: 1, 100 color: '#fff' 101 }]) 102 } 103 }, 104 data: (function() { 105 var res = []; 106 var len = 0; 107 //下面的while循环与上面的while循环达到的结果一样 108 while (len < 10) {//第一个值显示的位置 109 res.push(null); 110 len++; 111 } 112 return res; 113 })() 114 }] 115 }; 116 setInterval(function() { 117 axisData = (new Date()).toLocaleTimeString().replace(/^D*/, ''); 118 119 var data0 = option.series[0].data; 120 var data1 = option.series[1].data; 121 data0.shift(); 122 data0.push(Math.round(Math.random() * 10));//随机值*10 123 data1.shift(); 124 data1.push(Math.round(Math.random() * 10));//随机值*10 125 126 option.xAxis[0].data.shift(); 127 option.xAxis[0].data.push(axisData); 128 129 myChart.setOption(option); 130 }, 1000); 131 </script> 132 </body> 133 </html>