echarts5 动态数据 + 时间坐标轴

从南慕白

于 2021-12-24 11:02:27 发布

阅读量621

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_43030908/article/details/122123576

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下载官方示例运行不成功是因为当前时间设定问题

<!DOCTYPE html>
<html style="height: 100%">
<header>
    <meta charset="utf-8">
</header>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        var option;
        function randomData() {
            now = new Date(+now + 1000);
            value = value + Math.random() * 21 - 10;
            return {
                name: now.toString(),
                value: [now, 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
            }]
        };

        setInterval(function () {
            for (var i = 0; i < 5; i++) {
                data.shift();
                data.push(randomData());
            }
            myChart.setOption({
                series: [{
                    data: data
                }]
            });
        }, 1000);

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

    </script>
</body>

</html>

从南慕白

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
echarts5 动态数据 + 时间坐标轴

下载官方示例运行不成功是因为当前时间设定问题<!DOCTYPE html><html style="height: 100%"><header> <meta charset="utf-8"></header><body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div>
复制链接

扫一扫