echarts实现数据刷新时折现随时间变化的动态效果（从右至左移动）

最新推荐文章于 2025-09-11 20:12:36 发布

原创最新推荐文章于 2025-09-11 20:12:36 发布 · 1.8w 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

其它JS框架同时被 2 个专栏收录

10 篇文章

订阅专栏

前端插件

5 篇文章

订阅专栏

本文介绍如何使用ECharts创建一个动态更新的折线图，包括数据生成、图表初始化及实时更新的方法。通过设置定时器，使折线图能够显示最新的数据变化。

<div id="main" style="height:300px;"></div>

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

var date = [];
var randomData = [];

for(var i = 0; i<30; i++){
	date.push('第' + (i+1) + '天');
	randomData.push(Math.floor(Math.random()*100));
}

// 指定图表的配置项和数据
var option = {
    xAxis: {
        type: 'category',
        data: date
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: randomData,
        type: 'line'
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);	

var len = date.length;

setInterval(function(){
	randomData.push(Math.floor(Math.random()*100));
	randomData.shift();
	date.push(len++);
	date.shift();
	myChart.setOption({
	    xAxis: {
	        data: date
	    },
        series: [{
            data: randomData
        }]
    });	
}, 2000)