Echarts饼图实现-今日进度-动态图

效果预览

本次实现的是一个饼图，蓝色科技背景色，星球转动效果 + 进度显示。

实现思路

大致实现思路：

1. 初始化 ECharts 实例： 使用 echarts.init 方法初始化图表，并将其绑定到页面上的一个元素。
2. 定义样式和尺寸： 设置图表容器 .EChartBox 的宽度和高度，以及图表的背景色。
3. 配置图表选项： 创建一个 option 对象，配置图表的标题、图例、提示框、颜色等。
4. 设置标题： 使用 title 字段定义图表标题的样式和位置。
5. 隐藏图例和提示框： 设置 legend 和 tooltip 为 false 或相应的配置以隐藏或自定义显示。
6. 定义颜色数组： 使用 colors 数组定义图表使用的颜色。
7. 创建渐变色： 定义 innerRingColor 对象来创建渐变色效果，这将应用于饼图的一部分。
8. 配置系列（Series）： 在 series 数组中定义多个系列，每个系列代表饼图的一部分或一个特定的视觉效果。
9. 自定义渲染： 使用 renderItem 方法自定义绘制饼图的某些部分，例如绘制弧线和圆点。
10. 计算圆上点的坐标： 实现 getCirlPoint 函数，根据圆心坐标、半径和角度计算圆上点的坐标。
11. 实现动画效果： 创建 draw 函数来更新图表的角度 angle，使用 setInterval 定时调用 draw 函数来实现旋转动画。
12. 设置图表选项： 使用 myChart.setOption 方法应用配置项到图表。
13. 启动动画： 在页面加载完成后，首先调用 draw 函数一次，然后使用 setTimeout 延迟启动动画循环。
14. 停止动画： 在动画不需要时，可以清除 setInterval 设置的定时器。

整体来看，代码实现了一个具有动画效果的图表，其中包含了多个自定义系列，用于展示不同类型的请假天数。图表的图例根据 series 中的 name 自动生成，并通过 legend 配置项进行样式设置。动画效果通过改变角度 angle 并重新设置图表选项来实现。

关键代码展示

在您提供的代码中，关键部分主要涉及 ECharts 图表的初始化、配置和动画效果的实现。以下是关键代码的总结：

1. 图表初始化

var myChart = echarts.init<