echarts双半圆进度条

### 使用 ECharts 实现双半圆进度条 要使用 ECharts 创建双半圆进度条，可以通过配置 `gauge` 类型图表并调整其样式属性来实现。以下是具体方法： #### 配置项详解 1. **初始化实例** 初始化 ECharts 实例对象用于后续操作。 2. **设置全局配置** 定义全局选项如背景颜色、动画效果等。 3. **创建仪表盘系列** 利用 gauge 系列绘制两个独立的半圆形区域，并通过角度控制显示范围。 4. **定制外观** 修改指针样式、刻度线位置以及文字描述等内容以匹配需求。 5. **数据绑定** 将实际数值映射到对应的百分比区间内展示出来。 ```javascript option = { backgroundColor: '#fff', series: [ { name: 'Progress Bar', // 名字可以随意命名 type: 'gauge', // 图表类型为仪表盘(gauge) radius: '80%', // 半径大小占容器宽高的比例 startAngle: 90, // 开始的角度，默认是从正上方开始顺时针旋转 endAngle: -90, // 结束的角度 min: 0, max: 100, splitNumber: 5, // 分割段数 axisLine: { // 坐标轴线 lineStyle: { width: 30, color: [[0.5, '#FF6F6F'], [0.5, '#FFDE33']] } }, pointer: false, // 不显示默认指针 detail: { // 显示具体的值 formatter: '{value}%', offsetCenter: ['0%', '-70%'], fontSize: 20 }, data: [{ value: 70 }] // 数据源 }, { name: '', type: 'gauge', radius: '80%', center: ['50%', '50%'], startAngle: -90, endAngle: 90, min: 0, max: 100, splitNumber: 5, axisLine: { lineStyle: { width: 30, color: [[0.5, '#FFDE33'], [0.5, '#67C23A']] } }, pointer: false, detail: { formatter: '{value}%', offsetCenter: ['0%', '+70%'], fontSize: 20 }, data: [{ value: 80 }] } ] }; ``` 此代码片段展示了如何利用 ECharts 的 `gauge` 组件构建一对上下排列的彩色渐变半环形进度指示器[^1]。