当前位置：首页 > news >正文

基于echarts实时温度折线图表

news 来源：原创 2024/5/4 5:05:38

为什么80%的码农都做不了架构师？>>>

这里动态数据使用了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>

转载于:https://my.oschina.net/OneNb/blog/2986347