Echarts实现饼图带标签轮播高亮

收藏

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

背景
在 Wyn 商业智能中，当我们的数据中有较多分类，组件绑定展示出来显示效果非常拥挤。为了减少同时显示的标签数据，我们一般会使用组件轮播去增强显示效果。但是组件默认的轮播只有高亮效果，不会同时的显示数据标签。

为了实现下面的效果，可以利用的组件的自定义行为进行修改。
cc.gif873319396.png

前置步骤：
首先正常流程绑定饼图的系列和数值
image.png49940794.png

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

const data = option.series[0].data;
// 定义轮播逻辑
var currentIndex = -1;
setInterval(function() {
var dataLength = data.length;
// 如果之前有高亮的项目，则重置其标签显示状态为false
if (currentIndex >= 0) {
myChart.setOption({
series: [{
data: data.map((item, index) => ({
itemStyle: item.itemStyle,
name: item.name,
value: item.value,
label: {
show: false
}
}))
}]
});
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: currentIndex
});
}
currentIndex = (currentIndex + 1) % dataLength;
// 更新当前高亮项的标签显示状态为true
myChart.setOption({
series: [{
data: data.map((item, index) => ({
itemStyle: item.itemStyle,
name: item.name,
value: item.value,
label: index === currentIndex ? {show: true} : {show: false}
}))
}]
});
// 高亮当前部分
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
}, 2000); // 每隔2秒切换一次

复制代码

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

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

[仪表板] Echarts实现饼图带标签轮播高亮

0 个回复