### 实现
ECharts 图表
自动滚动效果
为了实现在
ECharts 中图表的
自动滚动效果，可以利用 `dataZoom` 组件中的特定配置项来达成目标。具体来说，在设置 `dataZoom` 的时候指定其类型为 `'inside'` 或者 `'slider'` 并开启 `autoPlay` 属性[^2]。
下面是一个完整的 HTML 文件例子，展示了如何通过
JavaScript 和
ECharts 库创建带有
自动滚动功能的时间序列折线图：
```html
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="UTF-8">
<!-- 引入
echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/
echarts@latest/dist/
echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0;">
<div id="main" style="height: 100%"></div>
<script type="text/
javascript">
// 初始化图表实例并指向页面上的 div 容器
var myChart =
echarts.init(document.getElementById('main'));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: (function () {
var list = [];
var date = new Date(2023, 9, 1);
var value;
for (var i = 0; i < 100; i
++) {
value = Math.round(Math.random() * 1000);
list.push([
echarts.format.formatTime('yyyy-MM-dd', date),
value
]);
date.setTime(date.getTime()
+ oneDay); // 增加一天时间戳
}
return list.map(function (item) {return item[0]});
})()
},
yAxis: {
type: 'value'
},
series: [{
name: '模拟
数据',
type: 'line',
smooth: true,
symbolSize: function (val) {
return val[1] / 10;
},
data: (function () {
var list = [];
var date = new Date(2023, 9, 1);
var value;
for (var i = 0; i < 100; i
++) {
value = Math.round(Math.random() * 1000);
list.push([date.getFullYear()
+ '-'
+
(date.getMonth()
+ 1)
+ '-'
+
date.getDate(), value]);
date.setDate(date.getDate()
+ 1);
}
return list.map(function (item) {return item[1]});
})(),
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [{type: 'average', name: '平均值'}]
}
}],
dataZoom: [{
type: 'inside',
start: 0,
end: 50,
autoPlay: true,
playInterval: 2000 // 设置播放间隔时间为两秒
}, {
type: 'slider',
start: 0,
end: 50
}]
};
myChart.setOption(option);
</script>
</body>
</html>
```
在这个案例里，除了定义常规的
数据轴、数值轴以及系列外，还特别设置了两个 `dataZoom` 控件——一个是内置型 (`inside`) 可以让用户直接在图表区域内拖动缩放；另一个则是滑块形式 (`slider`) 显示于图表下方供手动调整视野范围。更重要的是启用了 `autoPlay` 参数使得视窗能够每隔一定周期
自动向前推进，从而实现了所谓的“
自动滚动”。
本文介绍了如何使用ECharts实现自动滚动效果和定时移动提示框功能。通过设置ECharts的配置和利用计时器，使得在数据过多时图表能够自动滚动展示所有内容，同时提示框能随着时间自动移动，提升用户查看数据点详情的体验。
订阅专栏 解锁全文
扫一扫
1375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
