ECharts半圆弧进度图实现教程与技巧分享

引言：ECharts半圆弧进度图的应用场景与优势

ECharts作为一款功能强大的开源JavaScript图表库，广泛应用于数据可视化领域。其中，半圆弧进度图（也称为仪表盘或半圆进度条）是一种非常直观的数据展示方式，常用于显示任务完成度、系统负载率、目标达成率等场景。相比传统的线性进度条，半圆弧进度图具有更强的视觉冲击力和空间利用率，特别适合在仪表盘、控制面板等界面中使用。

半圆弧进度图的核心优势在于：

视觉吸引力强：弧形设计比直线更具美感，能有效吸引用户注意力
空间利用率高：半圆弧可以在有限空间内展示更多维度的信息
信息承载量大：可以同时展示当前值、阈值、目标值等多个数据点
交互体验好：支持鼠标悬停、点击等交互操作，提升用户体验

本文将详细介绍如何使用ECharts实现半圆弧进度图，包括基础实现、高级技巧和性能优化，帮助开发者快速掌握这一实用的数据可视化技术。

一、基础实现：快速构建半圆弧进度图

1.1 环境准备与基础配置

在开始之前，请确保已经引入ECharts库。可以通过CDN方式快速引入：

<!DOCTYPE html> html> <head> <meta charset="utf-8"> <title>半圆弧进度图示例</title> <!-- 引入ECharts --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <style> #main { width: 100%; option-height: 400px; } </style> </head> <body> <div id="main"></div> <script> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { // 这里将填充完整的配置 }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>

1.2 核心配置项详解

要实现半圆弧进度图，关键在于正确配置ECharts的series属性。以下是基础配置：

var option = { backgroundColor: '#ffffff', title: { text: '系统负载率', left: 'center', top: '20%', textStyle: { color: '#333', fontSize: 20, fontWeight: 'bold' } }, series: [{ type: 'pie', // 使用饼图类型来模拟半圆弧 radius: ['50%', '70%'], // 内外半径，形成环形 center: ['50%', '60%'], // 圆心位置，调整为下半部分 startAngle: 180, // 起始角度：180度（左端） endAngle: 0, // 结束角度：0度（右端） avoidLabelOverlap: false, label: { show: true, position: 'center', formatter: '{d}%', // 显示百分比 fontSize: 30, fontWeight: 'bold', color: '#333' }, labelLine: { show: false }, data: [ { value: 75, name: '完成度', itemStyle: { color: '#5470c6' } }, { value: 25, name: '剩余', itemStyle: { color: '#e6e6e6' } } ] }] };

1.3 基础实现原理分析

上述代码通过以下方式实现半圆弧进度图：

饼图类型选择：使用pie类型而非gauge类型，因为饼图可以更灵活地控制弧形的起始和结束角度
半径控制：radius: ['50%', '70%']创建了一个环形结构，内半径50%，外半径70%
角度控制：startAngle: 180和endAngle: 180将饼图限制在180度范围内，形成半圆
数据分割：通过两个数据项（完成度+剩余）来创建进度效果，第一个数据项代表进度，第二个代表背景
标签居中：使用label的center位置和formatter显示当前进度值

关键参数说明：

startAngle：180度表示从左侧开始
endAngle：0度表示到右侧结束
radius：数组形式[‘内半径%’, ‘外半径%’]，控制环形宽度
center：[‘x%’, ‘y%’]，控制圆心位置，调整为60%可使半圆弧位于下半部分

1.4 基础示例完整代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基础半圆弧进度图</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <style> #main { width: 600px; height: 400px; margin: 20px auto; border: 1px solid #ddd; } </style> </head> <body> <div id="main"></div> <script> var myChart = echarts.init(document.getElementById('main')); var option = { backgroundColor: '#ffffff', title: { text: 'CPU使用率', left: 'center', top: '15%', textStyle: { color: '#333', fontSize: 18, fontWeight: 'bold' } }, series: [{ type: 'pie', radius: ['55%', '75%'], center: ['50%', '65%'], startAngle: 180, endAngle: 0, label: { show: true, position: 'center', formatter: '{c}%', fontSize: 36, fontWeight: 'bold', color: '#5470c6' }, labelLine: { show: false }, data: [ { value: 68, name: '使用率', itemStyle: { color: '#5470c6' } }, { value: 32, name: '空闲', itemStyle: { color: '#e6e6e6' } } ] }] }; myChart.setOption(option); </script> </body> </html>

二、高级技巧：提升半圆弧进度图的视觉效果与交互性

2.1 添加动态效果与动画

ECharts支持丰富的动画效果，可以让半圆弧进度图更具吸引力：

var option = { animation: true, // 开启动画 animationDuration: 1500, // 动画时长（毫秒） animationEasing: 'cubicInOut', // 动画缓动函数 series: [{ type: 'pie', radius: ['55%', '75%'], center: ['50%', '65%'], startAngle: 180, endAngle: 0, // 添加渐变色效果 itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#5470c6' }, { offset: 1, color: '#7facff' } ]), shadowBlur: 10, shadowColor: 'rgba(84, 112, 198, 0.5)' }, label: { show: true, position: 'center', formatter: function(params) { // 自定义标签格式化函数 if (params.name === '使用率') { return params.value + '%n使用率'; } return ''; }, fontSize: 24, fontWeight: 'bold', color: '#333', lineHeight: 30 }, labelLine: { show: false }, data: [ { value: 75, name: '使用率' }, { value: 25, name: '空闲', itemStyle: { color: '#e6e6e6' } } ] }] };

2.2 实现多段进度展示（分段进度条）

有时需要展示多个进度段，比如任务完成度、警告阈值等：

var option = { title: { text: '项目进度监控', left: 'center', top: '10%', textStyle: { color: '#333', fontSize: 18 } }, series: [{ type: 'pie', radius: ['50%', '70%'], center: ['50%', '60%'], startAngle: 180, endAngle: 0, // 使用多个数据项创建分段效果 data: [ { value: 30, name: '已完成', itemStyle: { color: '#5470c6' } }, { value: 20, name: '进行中', itemStyle: { color: '#fac858' } }, { value: 10, name: '预警', itemStyle: { color: '#ee6666' } }, { value: 40, name: '未开始', itemStyle: { color: '#e6e6e6' } } ], label: { show: true, position: 'center', formatter: function(params) { if (params.name === '已完成') { return '60%n总进度'; } return ''; }, fontSize: 28, fontWeight: 'bold', color: '#333' }, labelLine: { show: false }, // 添加边框 itemStyle: { borderWidth: 2, borderColor: '#fff' } }] };

2.3 添加刻度与指针（模拟仪表盘）

通过添加额外的series来模拟仪表盘的刻度和指针：

var option = { title: { text: '服务器负载', left: 'center', top: '10%', textStyle: { color: '#333', fontSize: 18 } }, series: [ // 第一层：半圆弧进度 { type: 'pie', radius: ['50%', '70%'], center: ['50%', '60%'], startAngle: 180, endAngle: 0, data: [ { value: 85, name: '负载', itemStyle: { color: '#ee6666' } }, { value: 15, name: '空闲', itemStyle: { color: '#e6e6e6' } } ], label: { show: true, position: 'center', formatter: '{c}%', fontSize: 32, fontWeight: 'bold', color: '#ee6666' }, labelLine: { show: false } }, // 第二层：刻度线（使用scatter类型） { type: 'scatter', coordinateSystem: 'none', symbolSize: 2, data: generateScaleLines(), // 生成刻度线数据 itemStyle: { color: '#999' } }, // 第三层：指针（使用line类型） { type: 'line', coordinateSystem: 'none', symbol: 'circle', symbolSize: 8, lineStyle: { width: 2, color: '#333' }, data: generatePointer(85) // 生成指针数据 } ] }; // 生成刻度线数据的函数 function generateScaleLines() { var data = []; for (var i = 0; i <= 10; i++) { var angle = 180 - i * 18; // 180度到0度，每18度一个刻度 var radian = angle * Math.PI / 180; var x = 50 + 25 * Math.cos(radian); // 基于圆心位置计算 var y = 60 - 25 * Math.sin(radian); data.push([x, y]); } return data; } // 生成指针数据的函数 function generatePointer(value) { var angle = 180 - (value / 100) * 180; var radian = angle * Math.PI / 180; var x = 50 + 25 * Math.cos(radian); var y = 60 - 25 * Math.sin(radian); return [[50, 60], [x, y]]; // 从圆心到指针尖端 }

2.4 实现交互功能：鼠标悬停与点击事件

var myChart = echarts.init(document.getElementById('main')); var option = { series: [{ type: 'pie', radius: ['55%', '75%'], center: ['50%', '65%'], startAngle: 180, endAngle: 0, data: [ { value: 75, name: '已完成', itemStyle: { color: '#5470c6' } }, { value: 25, name: '剩余', itemStyle: { color: '#e6e6e6' } } ], label: { show: true, position: 'center', formatter: '{c}%', fontSize: 32, fontWeight: 'bold', color: '#333' }, labelLine: { show: false }, // 鼠标悬停效果 emphasis: { scale: true, scaleSize: 5, itemStyle: { shadowBlur: 20, shadowColor: 'rgba(84, 112, 198, 0.8)' } } }] }; // 添加点击事件 myChart.on('click', function(params) { if (params.componentType === 'series') { alert('您点击了：' + params.name + '，值为：' + params.value); } }); // 添加鼠标悬停事件 myChart.on('mouseover', function(params) { if (params.componentType === 'series') { // 动态更新标题 myChart.setOption({ title: { text: '当前选中：' + params.name + ' - ' + params.value + '%', textStyle: { color: '#5470c6' } } }); } }); myChart.setOption(option);

三、性能优化与最佳实践

3.1 数据更新优化

对于实时数据更新的场景，使用setOption的第二个参数notMerge参数可以优化性能：

// 不推荐：每次都完全重绘 function updateChart(value) { myChart.setOption({ series: [{ data: [ { value: value, name: '使用率' }, { value: 100 - value, name: '空闲' } ] }] }); } // 推荐：只更新变化的数据 function updateChartOptimized(value) { myChart.setOption({ series: [{ data: [ { value: value, name: '使用率' }, { value: 100 - value, name: '空闲' } ] }] }, false, true); // 第三个参数为true表示不合并配置，只更新数据 }

3.2 响应式布局适配

确保图表在不同屏幕尺寸下正常显示：

// 响应式调整 function resizeChart() { var container = document.getElementById('main'); var width = container.clientWidth; var height = container.clientHeight; // 根据容器大小调整字体大小 var fontSize = Math.min(width / 15, 36); myChart.setOption({ series: [{ label: { fontSize: fontSize } }] }); myChart.resize(); } // 监听窗口大小变化 window.addEventListener('resize', resizeChart);

3.3 代码组织与复用

将半圆弧进度图封装成可复用的类：

class SemiCircleProgress { constructor(containerId, options = {}) { this.container = document.getElementById(containerId); this.chart = echarts.init(this.container); this.defaultOptions = { title: '', value: 0, color: '#5470c6', backgroundColor: '#e6e6e6', unit: '%' }; this.options = { ...this.defaultOptions, ...options }; } // 渲染图表 render() { const { title, value, color, backgroundColor, unit } = this.options; const option = { title: { text: title, left: 'center', top: '10%', textStyle: { color: '#333', fontSize: 16 } }, series: [{ type: 'pie', radius: ['55%', '75%'], center: ['50%', '65%'], startAngle: 180, endAngle: 0, data: [ { value: value, name: '进度', itemStyle: { color: color } }, { value: 100 - value, name: '背景', itemStyle: { color: backgroundColor } } ], label: { show: true, position: 'center', formatter: `{c}${unit}`, fontSize: 28, fontWeight: 'bold', color: color }, labelLine: { show: false } }] }; this.chart.setOption(option); } // 更新数据 update(newValue) { this.options.value = newValue; this.render(); } // 销毁实例 destroy() { if (this.chart) { this.chart.dispose(); this.chart = null; } } // 响应式调整 resize() { if (this.chart) { this.chart.resize(); } } } // 使用示例 const progress1 = new SemiCircleProgress('main', { title: '内存使用率', value: 65, color: '#ee6666' }); progress1.render(); // 更新数据 setTimeout(() => progress1.update(82), 2000); // 响应式 window.addEventListener('resize', () => progress1.resize());

3.4 常见问题与解决方案

问题1：半圆弧显示不完整或角度错误

原因：startAngle和endAngle设置不正确
解决：确保startAngle为180，endAngle为0，或根据需要调整

问题2：标签文字被遮挡

原因：标签位置或字体大小不合适
解决：调整label的position为center，或使用formatter自定义显示内容

问题3：数据更新时动画卡顿

原因：频繁调用setOption或数据量过大
解决：使用notMerge参数，或使用update方法只更新数据

问题4：在移动端显示异常

原因：未做响应式适配
解决：监听resize事件，动态调整字体大小和图表尺寸

四、总结

半圆弧进度图是ECharts中一种非常实用的数据可视化形式，通过合理配置pie类型的radius、startAngle、endAngle等参数，可以轻松实现美观且功能丰富的进度展示效果。从基础实现到高级技巧，再到性能优化，掌握这些要点将帮助您在项目中更好地应用半圆弧进度图。

核心要点回顾：

使用pie类型，通过角度和半径控制形成半圆弧
使用两个数据项（进度+背景）创建进度效果
通过label的center位置显示核心数据
利用渐变色、阴影、动画提升视觉效果
封装成可复用的类，提高代码维护性

希望本文能帮助您快速掌握ECharts半圆弧进度图的实现技巧，在实际项目中创造出更优秀的数据可视化效果。# ECharts半圆弧进度图实现教程与技巧分享