【7.1】环形图数据标签如何调整在环形中间并且轮播

收藏

要将echar环形图的数据标签调整到环形图中间并且轮播，自定义属性应该怎么写
image.png729538573.png

Felix.Li · Felix.Li

您好，这个就需要自定义属性和自定义行为配合一起使用。

自定义属性吧标签设置在内部，然后自定义行为去控制每次切换显示即可:
自定义属性：

option.series[0].label = {
show: false,
position: 'center'
};
option.myIndex = 0;
option.series[0].animation = false
return option;

复制代码

自定义行为:

setInterval(() => {
option.series[0].data[option.myIndex].label = {
show: false,
position: 'center'
};
if(++option.myIndex >= option.series[0].data.length)
option.myIndex = 0;
console.log(option.myIndex)
option.series[0].data[option.myIndex].label = {
show: true,
position: 'center'
};
myChart.setOption(option);
}, 2000)

复制代码

即可实现自定义轮播的效果。

Felix.Li · Felix.Li

本帖最后由 Felix.Li 于 2024-12-2 14:23 编辑

优化了一下，让原本的右侧属性生效:
属性:

option.series[0].data.forEach((item) => {
var label = JSON.parse(JSON.stringify(option.series[0].label))
item.label = label;
item.label.show = false;
item.label.position = 'center';
})
option.series[0].data[0].label.show = true;
option.myIndex = 0;
option.series[0].animation = false
return option;

复制代码

行为:

setInterval(() => {
option.series[0].data[option.myIndex++].label.show = false;
if(option.myIndex >= option.series[0].data.length)
option.myIndex = 0;
option.series[0].data[option.myIndex].label.show = true;
myChart.setOption(option);
}, 2000)

复制代码

卫美松1 · 卫美松1

我这为什么没有自定义行为呢 image.png811172485.png

卫美松1 · 卫美松1

Bella.Yuan · Bella.Yuan

卫美松1 发表于 2024-12-2 18:34

您好，这个属性是8.0新加的，您可以将授权码前4位截图上传，我们帮您查一下，看您是否可以升级到8.0版本，如果确认可以升级的话，官网目前就是最新的8.0版本，您可以下载后进行升级操作。升级参考教程：
【安装运维】Wyn Enterprise环境升级方案
https://gcdn.grapecity.com.cn/showtopic-144134-1-1.html
(出处: 葡萄城开发者社区)

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

[处理中] 【7.1】环形图数据标签如何调整在环形中间并且轮播

5 个回复

Wyn高级认证

Wyn认证