多个echarts圆环进度条效果

### 如何使用 ECharts 实现多个圆环进度条效果 要通过 ECharts 创建多个圆环进度条，可以利用 `series` 中的 `type: 'gauge'` 或者更常见的 `type: 'pie'` 配置项来实现。以下是具体方法： #### 数据准备与配置 为了绘制多个圆环进度条，通常需要定义一组数据，每组数据对应一个圆环。可以通过设置不同的半径 (`radius`) 和位置 (`center`) 来调整各个圆环的位置和大小[^1]。 #### 示例代码 以下是一个完整的示例代码片段，展示如何创建三个不同颜色和百分比的圆环进度条： ```javascript option = { title: [ { text: 'Progress A', left: '20%', top: '85%' }, { text: 'Progress B', left: '50%', top: '85%' }, { text: 'Progress C', left: '80%', top: '85%' } ], series: [ { type: 'pie', radius: ['70%', '90%'], // 设置内外圈比例 center: ['20%', '50%'], // 圆心坐标 (水平, 垂直) labelLine: { show: false }, // 不显示标签线 label: { position: 'center', fontSize: 14 }, // 居中文字 data: [{ value: 60, name: 'A', itemStyle: { color: '#FFB3C5' } }] }, { type: 'pie', radius: ['70%', '90%'], center: ['50%', '50%'], labelLine: { show: false }, label: { position: 'center', fontSize: 14 }, data: [{ value: 80, name: 'B', itemStyle: { color: '#B3D4FF' } }] }, { type: 'pie', radius: ['70%', '90%'], center: ['80%', '50%'], labelLine: { show: false }, label: { position: 'center', fontSize: 14 }, data: [{ value: 40, name: 'C', itemStyle: { color: '#FFFFCC' } }] } ] }; ``` 上述代码展示了如何通过修改 `center` 参数将三个圆环分别放置在画布的不同区域，并设置了各自的颜色和数值[^2]。 #### 自定义样式 如果希望进一步美化图表，比如添加背景色、渐变填充或者动态动画效果，则可以在 `itemStyle` 中加入更多属性。例如，启用渐变填充如下所示： ```javascript data: [{ value: 60, name: 'A', itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#FFB3C5' }, { offset: 1, color: '#FFFFFF' } ]) } }] ``` 此部分实现了从指定起始颜色到结束颜色的平滑过渡[^3]。 ---