Echarts实时

  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>