ECharts学习三 --- 数据的动态更新

最新推荐文章于 2025-06-21 16:09:48 发布

紫冰Nan

最新推荐文章于 2025-06-21 16:09:48 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： ECharts

本文链接：https://blog.youkuaiyun.com/NN_nan/article/details/83014258

ECharts 专栏收录该内容

5 篇文章

订阅专栏

ECharts图表的数据更新是通过setOption方法实现，根据数据变化展示动画效果。在ECharts 3中，不再支持addData方法，可以通过向data数组添加数据后调用setOption来动态更新。同时提到了js中的setTimeout和setInterval定时器在获取数据更新场景中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ECharts 由数据驱动，数据的改变驱动图表展现的改变
所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
ECharts 3 中移除了 ECharts 2 中的 addData 方法。如果只需要加入单个数据，可以先 data.push(value) 后 setOption

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.min.js"></script>
</head>
<body>

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

<script type="text/javascript">

	var myChart = echarts.init(document.getElementById('main'));
	
	myChart.setOption({
	    xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: date
	    },
	    yAxis: {
	        boundaryGap: [0, '50%'],
	        type: 'value'
	    },
	    series: [
	        {
	            name:'成交',
	            type:'line',
	            smooth:true,
	            symbol: 'none',
	            stack: 'a',
	            areaStyle: {
	                normal: {}
	            },
	            data: data
	        }
	    ]
	});
	
	var base = +new Date(2014, 9, 3);
	var oneDay = 24 * 3600 * 1000;
	var date = [];

	var data = [Math.random() * 150];
	var now = new Date(base);

	function addData(shift) {
	    now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
	    date.push(now);
	    data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);

	    if (shift) {
	        date.shift();
	        data.shift();
	    }

	    now = new Date(+new Date(now) + oneDay);
	}

	for (var i = 1; i < 100; i++) {
	    addData();
	}

	//setInterval以指定时间为周期循环执行
	setInterval(function () {
	    addData(true);
	    myChart.setOption({
	        xAxis: {
	            data: date
	        },
	        series: [{
	            name:'成交',
	            data: data
	        }]
	    });
	}, 500);

</script>
</body>
</html>

效果图：（动态图）