echart实时曲线图

风下森林

已于 2022-08-08 09:55:28 修改

阅读量999

点赞数

分类专栏：前端文章标签： html5

于 2022-07-14 10:14:48 首次发布

本文链接：https://blog.csdn.net/weixin_44347152/article/details/125778509

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html实时曲线

实现原理是:在数据在原有数据基础上弹出一个放进去一个;如果不弹出,数据多了就会溢出

setInterval(function() {
        for(var i = 0; i < 5; i++) {
            data.shift();
            //shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
            data.push(randomData());
        }
        myChart.setOption({
            series: [{
                data: data
            }]
        });
    }, 1000);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <!--<script type="text/javascript" src="jquery.js"></script>-->
   <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
    </body>
</html>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例    
    var myChart = echarts.init(document.getElementById('main'));
    function randomData() {
        now = new Date(+now + oneDay);
        value = value + Math.random() * 21 - 10;
        return {
            name: now.toString(),
            value: [
                [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                Math.round(value)
            ]
        }
    }
    var data = [];
    var now = +new Date(1997, 9, 3);
    var oneDay = 24 * 3600 * 1000;
    var value = Math.random() * 1000;
    for(var i = 0; i < 1000; i++) {
        data.push(randomData());
    }
    option = {
        title: {
            text: '动态数据 + 时间坐标轴'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function(params) {
                params = params[0];
                var date = new Date(params.name);
                return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
            },
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [{
            name: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: data,
            markLine: {
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        lineStyle: {
                            type: "dash",
                            color: 'red',
                            width: 2
                        },
                        label: {
                            formatter: 'COD',
                            textStyle: {
                                fontSize: 16,
                                fontWeight: "bolder"
                            }
                        },
                        show: true,
                        color: '#4c5336'
                    }
                },
                data: [{
                    yAxis: 900
                }]
            },
        }],
    };
    // 使用刚指定的配置项和数据显示图表。    
    myChart.setOption(option);
    setInterval(function() {
        for(var i = 0; i < 5; i++) {
            data.shift();
            data.push(randomData());
        }
        myChart.setOption({
            series: [{
                data: data
            }]
        });
    }, 1000);
</script>