ECharts 实现圆形进度条

### 使用 ECharts 实现圆形进度条 为了实现圆形进度条，可以利用 ECharts 提供的强大配置项来定制化图形。下面是一个简单的例子展示如何创建一个基本的圆形进度条。 #### HTML 文件设置 首先，在HTML文件内引入ECharts库，并准备一个用于显示图表的容器： ```html <div id="main" style="width: 600px;height:400px;"></div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> ``` #### 初始化 ECharts 实例并绘制圆环图 接着使用 `echarts.init` 函数初始化该DOM节点上的ECharts实例对象，并调用其 `setOption` 方法加载选项数据以完成绘图操作[^1]。 ```javascript var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { series: [ { name: 'Progress', type: 'gauge', // 设置为仪表盘类型 radius: '75%', // 半径大小调整 startAngle: 90, // 起始角度设定 endAngle: -270, min: 0, // 数据范围最小值 max: 100, // 数据范围最大值 splitNumber: 10, // 刻度分割段数 axisLine: { // 坐标轴线 lineStyle: { // 属性lineStyle控制线条样式 width: 30, color: [[0.3, '#67e0e3'], [0.7, '#37a2da'], [1, '#fd666d']] } }, pointer: { // 指针样式 icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', length: '12%', width: 8, offsetCenter: [0, '-60%'] }, detail: { // 显示百分比数值 formatter:'{value}%', fontSize: 50 }, data:[ // 进度条的数据源 {value: 70} ] } ] }; if (option && typeof option === 'object') { myChart.setOption(option); } ``` 此代码片段定义了一个具有特定样式的圆形进度条，其中包含了颜色渐变、指针位置以及数据显示格式等内容。通过修改 `data` 数组中的 `value` 字段即可改变当前进度值[^2]。