基於echarts實時溫度折線圖表
阿新 • • 發佈：2018-12-10
這裡動態資料使用了js模擬生成，使用時修改一下即可。
效果圖
a.html程式碼:
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; function randomData() { now = new Date(+now + oneDay); value = value + Math.random() * 21 - 10; return { name: now.toString(), value: [ now, value.toFixed(2) ] } } var data = []; var now = +new Date(); var oneDay = 5000; var value = Math.random() * 100; for (var i = 0; i < 50; i++) { data.push(randomData()); } option = { title: { text: '實時溫度', x:'center' }, tooltip: { trigger: 'axis', formatter: function (params) { params = params[0]; var date = new Date(params.name); return date.toLocaleString('chinese', { hour12: false })+'<br>溫度:'+ params.value[1]; }, axisPointer: { animation: false } }, xAxis: { type: 'time', name:'時間', splitLine: { show: false } }, yAxis: { type: 'value', name:'溫度℃', boundaryGap: [0, '100%'], splitLine: { show: false } }, series: [{ name: '模擬資料', type: 'line', data: data }] }; setInterval(function () { data.shift(); data.push(randomData()); myChart.setOption({ series: [{ data: data }] }); }, 5000);; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>