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

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

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

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

1. option.series[0].label = {
   
2.         show: false,
   
3.         position: 'center'
   
4.       };
   
5. option.myIndex = 0;
   
6. option.series[0].animation = false
   
7. return option;

复制代码

自定义行为:

1. setInterval(() => {
   
2.   option.series[0].data[option.myIndex].label = {
   
3.     show: false,
   
4.     position: 'center'
   
5.   };
   
6.   if(++option.myIndex >=  option.series[0].data.length)
   
7.     option.myIndex = 0;
   
8.   console.log(option.myIndex)
   
9.   option.series[0].data[option.myIndex].label = {
   
10.     show: true,
    
11.     position: 'center'
    
12.   };
    
13.   myChart.setOption(option);
    
14. }, 2000)
    

复制代码

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

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

1. option.series[0].data.forEach((item) => {
   
2.           var label = JSON.parse(JSON.stringify(option.series[0].label))
   
3.     item.label = label;
   
4.            item.label.show = false;
   
5.           item.label.position = 'center';
   
6.   })
   
7. option.series[0].data[0].label.show = true;
   
8. option.myIndex = 0;
   
9. option.series[0].animation = false
   
10. return option;

复制代码

行为:

1. setInterval(() => {
   
2.   option.series[0].data[option.myIndex++].label.show = false;
   
3.   if(option.myIndex >=  option.series[0].data.length)
   
4.     option.myIndex = 0;
   
5.   option.series[0].data[option.myIndex].label.show = true;
   
6.   myChart.setOption(option);
   
7. }, 2000)
   

复制代码

我这为什么没有自定义行为呢

卫美松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
(出处: 葡萄城开发者社区)