Echarts图实时折线图中间加入一条新的折线

ECharts 是一个非常强大的可视化图表库，可以用来创建各种类型的图表。在实时折线图中添加新折线的方法有很多，下面给出一个简单的例子：

首先，需要引入 ECharts 的 JavaScript 文件。

然后，在 HTML 中添加一个 div 元素，用来展示图表。

<div id="main" style="width: 600px;height:400px;"></div>

接着，在 JavaScript 中使用 ECharts 初始化图表，并设置图表的基本配置，如标题、x 轴、y 轴等。

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

var option = {
    title: {
        text: '实时折线图'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
    }]
};

myChart.setOption(option);

最后，在 JavaScript 中使用 setOption 方法动态添加新的数据，并重新渲染图表。

var newData = [820, 932, 901, 934, 1290, 1330, 1320];

setInterval(function () {
    newData.shift();
    newData.push(Math.round(Math.random() * 1000));
    option.series.push({
        data:newData,
        type: 'line',
        smooth: true
    });
    myChart.setOption(option);
}, 1000);

这样就可以实现在实时折线图中动态添加新的折线了。

其中,每次使用 setInterval 方法,就可以加入新的数据