记录–ECharts — 饼图相关功能点（内环、外环、环形间隔、环形文字、轮播动画）

这个网上例子其实挺多的，主要的方式就是拓展data数据，然后设置itemStyle的color为透明色即可，看起来很简单；但是在我们的项目里会有一定难度，因为我们的data处理被封装到内部公共组件去处理了，所以没办法去直接修改data

这里的思路（组长提供的），传一个方法到内部去，然后获取到其更新data后的option，并在更新前进行处理

所以我的方式是设置了一个方法 handleOptionBeforeUpdate ，接收instance、option两个参数，instace后面的轮播动画会使用到，现在只需要使用option，我们对其进行修改，再返回一个新的option回去，让它进行更新即可

插入间隙

    // 计算间隙（根据比例判断间隙需要多大）     const sum = option.series[0].data.reduce((sum, d) => sum + +d.value, 0)     const val = (sum * props.borderGap) / 10     for (const series of option.series) {       series.data = series.data.reduce(         (sum, d) => [           ...sum,           d,           { name: '', value: val, itemStyle: { color: 'transparent' } }         ],         []       )     }

    instance.dispatchAction({       type: 'downplay',       seriesIndex: 0, // 系列     	dataIndex: 0 // 具体index     })

type类型

• highlight —— 高亮
• downplay —— 取消高亮
• showTip —— 显示Tooltip
• hideTip —— 隐藏Tooltip
• select —— 选中
• unselect —— 取消选中
• …

我们后面讨论决定选择使用highlight和downplay两种

不使用select的原因，主要是因为selct选中在项目里有问题，会存在选中多个的情况，无法取消选中，通过的方式是重新渲染图表，但是太消耗性能了，而且选中会导致居中文字偏移，所以放弃了这种方式

接下来，看一下具体的定时器方法

    const timer = useRef<NodeJS.Timer>()     const currentIndex = useRef<number>(0)      const resetSelect = () => {       eChartInstance.current?.dispatchAction({         type: 'downplay',         seriesIndex: 0       })     }      const selectSector = () => {       eChartInstance.current?.dispatchAction({         type: 'highlight',         seriesIndex: 0,         dataIndex: currentIndex.current       })     }      // 轮播动画     const rotatingAnimation = () => {       if (props.rotatingAnimation.isActive) {         clearInterval(timer.current)         timer.current = setInterval(() => {           const dataLen = eChartOption.current?.series[0].data.length ?? 0           currentIndex.current = (currentIndex.current + 2) % dataLen           resetSelect()           selectSector()         }, props.rotatingAnimation.duration * 1000)       } else {         resetSelect()       }     }      useEffect(() => {       rotatingAnimation()       return () => {         clearInterval(timer.current)       }     }, [props.rotatingAnimation])