Echarts实现条状图/柱状图轮播

收藏

本帖最后由 lucas.Yan 于 2025-3-11 10:56 编辑

背景
在 Wyn 商业智能中，当我们的数据中有较多分类，组件绑定展示出来显示效果非常拥挤。为了减少同时显示的数据，我们可以打开缩放轴的开关，但是缩放轴无法自动的去改变显示区域。

那么我们该如何通过Wyn来呈现下面的轮播效果。
fff.gif660261535.png

前置步骤：
首先正常流程绑定条状图或者柱状图的分类和数值
image.png66195067.png

关键步骤：
增加自定义行为：
image.png987733764.png

const step = 7; // 同时显示数量
// 根据图表类型去切换yAxis和xAxis，搜索对应关键词，将代码中的相同项全部替换。
const categories = option.yAxis.data; // 条状图
// const categories = option.xAxis.data; // 柱状图
const data = option.series[0].data;
let startIndex = 0;
console.log(option);
option.yAxis.data = categories.slice(0,step)
option.series[0].data = data.slice(0,step)
myChart.setOption(option);
setInterval(function () {
// 更新开始索引，超出范围则回到开头
startIndex = (startIndex + 1) % categories.length;
// 获取新的显示区间
var newCategories = [];
var newData = [];
for(var i = 0; i < step; i++) {
var index = (startIndex + i) % categories.length;
newCategories.push(categories[index]);
newData.push(data[index]);
}
// 更新图表选项
myChart.setOption({
yAxis: {
data: newCategories
},
series: [{
data: newData
}]
});
}, 3000); // 每隔3秒切换一次

复制代码

后续版本：
支持多数值绑定轮播

柱状图条状图自动切换

相关文章：Echarts实现饼图轮播高亮 - Wyn 商业智能专区 - 产品教程 - 葡萄城开发者社区

		自动登录	找回密码
密码			立即注册

[仪表板] Echarts实现条状图/柱状图轮播

0 个回复