echart实现随时间移动的折线图

阅读数:32 评论数:0

跳转到新版页面

分类

html/css/js

正文

以下是一个基本的实现步骤：

1. 引入 ECharts 库

首先，你需要在 HTML 文件中引入 ECharts 库。

<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

2. 准备一个容器来放置 ECharts 图表

在 HTML 中创建一个 div 元素作为 ECharts 图表的容器。

<!-- 图表容器 DOM -->
<div id="chart" style="width: 600px;height:400px;"></div>

3. 初始化 ECharts 实例

在 JavaScript 中，使用 echarts.init 方法来初始化一个 ECharts 实例。

var myChart = echarts.init(document.getElementById('chart'));

4. 配置 ECharts 选项

设置 ECharts 的配置项，这里是一个基本的折线图配置。

var option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [] // 初始化为空数组，后续动态更新
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [], // 初始化为空数组，后续动态更新
        type: 'line',
        areaStyle: {}
    }]
};

myChart.setOption(option);

5. 动态更新数据

创建一个函数来更新图表数据。这个函数可以定时调用，每次调用时，它会向图表中添加新的数据点，并且可能移除最旧的数据点。

function addData(shift) {
    var now = new Date();
    var time = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
    var value = (Math.random() * 10 + 5).toFixed(2) - 0; // 随机生成新的数据

    // 添加新的数据
    myChart.addData([
        [
            0,        // 系列索引
            value,    // 新数据
            true,     // 新增数据是否从队列头部插入
            shift,    // 是否需要移除队列尾部的数据
            time      // 坐标轴标签
        ]
    ]);
}

// 每隔一段时间调用 addData 方法
setInterval(function () {
    addData(true);
}, 2000);

在 addData 函数中，shift 参数用于指定是否需要从数据数组的开始位置移除元素。如果 shift 为 true，随着新数据的添加，旧数据会被移除，从而实现了折线图随时间移动的效果。

6. 完整的 HTML 示例

结合以上步骤，下面是一个完整的 HTML 示例，它演示了如何创建一个随时间更新的折线图。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="chart" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('chart'));

        var option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [],
                type: 'line',
                areaStyle: {}
            }]
        };

        myChart.setOption(option);

        function addData(shift) {
            var now = new Date();
            var time = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
            var value = (Math.random() * 10 + 5).toFixed(2) - 0;

            myChart.addData([
                [
                    0,
                    value,
                    true,
                    shift,
                    time
                ]
            ]);
        }

        setInterval(function () {
            addData(true);
        }, 2000);
    </script>
</body>
</html>