1. 程式人生 > >基於echarts實時溫度折線圖表

基於echarts實時溫度折線圖表

這裡動態資料使用了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>