全部代码公众号自取「链接」

在数据可视化领域，环形图是一种常见且有效的图表类型，特别适合展示比例关系。今天我将分享如何使用ECharts创建一个带有精美无缝圆形动效的环形图，这个效果可以为你的数据展示增添现代感和视觉吸引力。

效果概述

JavaScript实现

初始化图表

在数初始化图表后，我们需要获取图表的宽高，以便在后面动态计算中心元素的位置、半径等。

环形图配置

中心圆形动画

这是本文的重点 - 创建无缝旋转的圆形动画：由于环形图内环为70%，要使内部圆形与环形图无缝需要将circle的半径设置为图表宽高的最小值乘以0.35。动画效果通过`keyframeAnimation`实现，注意需设置旋转中心`originX`和`orginY`为绘制circle的圆心。

总结

通过ECharts的`graphic`功能和关键帧动画，我们可以轻松创建各种复杂的视觉效果。本文展示的旋转光环不仅美观，而且实现起来并不复杂。你可以根据需要调整颜色、旋转速度和尺寸，以适应不同的设计需求。这种动效特别适合需要突出显示中心数据的场景，如KPI展示、数据仪表盘等。希望这篇文章能帮助你提升数据可视化的视觉效果！

全部代码公众号自取「链接」