慕课在线编辑器

代码提交代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: 600px; height: 400px;"></div>

const option = {
				// appendData 接口不会更改初始渲染后的任何组件
				// 所以需要预留足够的空间来容纳追加的图案
				xAxis: { type: 'category', data: range(1, 20) },
				// 同样的，在 y 轴上也需要设定好序列的最大值，以容纳追加的图案
				yAxis: { type: 'value', max: 180 },
				series: [
					{
						type: 'bar',
						data: [random(), random()],
					},
				],
			};
			myChart.setOption(option);

setInterval(() => {
				myChart.appendData({ seriesIndex: 0, data: [random()] });
			}, 300);
		</script>
	</body>
</html>

运行结果