新版echarts柱状图翻页效果
时间: 2023-06-29 08:15:31 浏览: 97
新版 ECharts 支持通过数据量过大时,自动分页展示柱状图,并提供了翻页效果。具体实现方式如下:
1. 配置 `dataZoom` 组件,设置 `type` 为 `slider`,并指定 `xAxisIndex` 或 `yAxisIndex`。
```javascript
option = {
...
xAxis: {
type: 'category',
data: [...],
},
yAxis: {
type: 'value',
},
dataZoom: {
type: 'slider',
xAxisIndex: 0, // 指定分页的 x 轴
start: 0,
end: 50, // 默认展示前 50 条数据
},
series: {
type: 'bar',
data: [...],
},
...
};
```
2. 监听 `dataZoom` 的 `dataZoom` 事件,在回调函数中获取当前的分页区间,并根据区间更新柱状图的数据。
```javascript
// 监听 dataZoom 的 dataZoom 事件
myChart.on('dataZoom', function (params) {
// 获取当前分页区间的起始位置和结束位置
var start = Math.round(params.batch[0].start);
var end = Math.round(params.batch[0].end);
// 更新柱状图数据
myChart.setOption({
series: [{
data: data.slice(start, end),
}],
});
});
```
3. 在柱状图上方添加翻页按钮,并绑定点击事件,通过调用 `setOption` 方法更新 `dataZoom` 的 `start` 和 `end` 属性。
```javascript
// 添加翻页按钮
var prevBtn = document.getElementById('prevBtn');
var nextBtn = document.getElementById('nextBtn');
// 绑定点击事件
prevBtn.onclick = function () {
var pageSize = Math.round((end - start) / 2); // 计算每页数据量
start = Math.max(0, start - pageSize); // 更新起始位置
end = Math.max(pageSize, end - pageSize); // 更新结束位置
// 更新 dataZoom 组件
myChart.setOption({
dataZoom: {
start: 100 * start / data.length,
end: 100 * end / data.length,
},
});
};
nextBtn.onclick = function () {
var pageSize = Math.round((end - start) / 2); // 计算每页数据量
start = Math.min(data.length - pageSize, start + pageSize); // 更新起始位置
end = Math.min(data.length, end + pageSize); // 更新结束位置
// 更新 dataZoom 组件
myChart.setOption({
dataZoom: {
start: 100 * start / data.length,
end: 100 * end / data.length,
},
});
};
```
通过以上步骤,即可实现柱状图的分页展示和翻页效果。