ECharts绘制半饼图详细教程与实用技巧分享

引言：什么是半饼图及其应用场景

半饼图（Half Pie Chart）是ECharts中饼图的一种变体，它将传统的完整圆形饼图截取一半，形成半圆形的可视化效果。这种图表类型特别适合用于展示数据的占比关系，同时在视觉上更加紧凑和现代。

半饼图的核心优势：

视觉焦点集中：半圆形状天然引导视线，突出关键数据
空间利用率高：相比完整饼图，半饼图占用更少的垂直空间
美观现代：符合现代UI设计趋势，常用于仪表盘和数据大屏
信息层次清晰：便于在同一页面展示多个数据维度

典型应用场景：

仪表盘：展示KPI完成度、预算使用率等
数据大屏：作为核心指标的可视化组件
移动端报表：节省屏幕空间，提升用户体验
进度展示：任务完成度、项目进度等

ECharts基础环境准备

在开始绘制半饼图之前，需要确保ECharts环境已经正确配置。

1. 引入ECharts库

<!-- 方式1：通过CDN引入（推荐用于快速原型开发） --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <!-- 方式2：通过npm安装（推荐用于生产环境） --> <!-- 在项目中执行：npm install echarts -->

2. 准备容器元素

<!-- 在HTML中创建一个具备尺寸的容器 --> <div id="halfPieChart" style="width: 600px; height: 400px;"></div>

3. 初始化ECharts实例

// 获取DOM容器 const chartDom = document.getElementById('halfPieChart'); // 初始化ECharts实例 const myChart = echarts.init(chartDom);

半饼图核心实现原理

半饼图的实现基于ECharts饼图（pie）系列，通过起始角度（startAngle）和结束角度（endAngle）参数来控制饼图的显示范围。

核心参数说明

参数名	类型	默认值	说明
startAngle	number	90	饼图起始角度（从正上方开始，顺时针为正）
endAngle	number	-270	鄂饼图结束角度（从正上方开始，顺时针为正）

角度计算规则：

0°：正右方（3点钟方向）
90°：正上方（12点钟方向）
360°：回到正右方
负数角度：表示逆时针方向

半饼图角度设置：

startAngle: 180（从正左方开始）
endAngle: 0（到正右方结束）
这样就能得到一个从左到右的半圆饼图

基础半饼图实现代码

下面是一个完整的半饼图实现示例，包含详细的代码注释：

// 1. 准备数据 const data = [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' } ]; // 2. 配置项 const option = { // 标题配置 title: { text: '半饼图示例', left: 'center', top: 20, textStyle: { fontSize: 18, color: '#333' } }, // 工具提示 tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' }, // 图例配置 legend: { orient: 'vertical', left: 'left', data: data.map(item => item.name) }, // 系列配置（核心部分） series: [ { name: '访问来源', type: 'pie', // 饼图类型 radius: ['40%', '70%'], // 内半径和外半径（形成圆环效果） avoidLabelOverlap: false, // 关键：角度设置（实现半饼图） startAngle: 180, // 从正左方开始 endAngle: 0, // 到正右方结束 // 标签配置 label: { show: true, position: 'outside', // 标签显示在外部 formatter: '{b}: {d}%' // 显示名称和百分比 }, // 引导线配置 labelLine: { show: true, length: 15, length2: 10, smooth: true }, // 数据项样式 itemStyle: { borderRadius: 5, borderColor: '#fff', borderWidth: 2 }, // 高亮样式 emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold' }, itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, // 数据 data: data } ] }; // 3. 渲染图表 myChart.setOption(option); // 4. 响应式处理（可选） window.addEventListener('resize', function() { myChart.resize(); });

进阶技巧与实用配置

1. 不同方向的半饼图

通过调整起始和结束角度，可以创建不同方向的半饼图：

// 从上到下的半饼图（垂直方向） const verticalOption = { series: [{ startAngle: 270, // 从正下方开始 endAngle: 90, // 到正上方结束 // 其他配置同上 }] }; // 从右到左的半饼图（水平镜像） const mirrorOption = { series: [{ startAngle: 0, // 从正右方开始 endAngle: 180, // 到正左方结束 // 其他配置同上 }] };

2. 半饼图与仪表盘结合

半饼图常与仪表盘结合使用，形成复合图表：

const dashboardOption = { series: [ // 第一层：半饼图（作为背景） { name: '背景', type: 'pie', radius: ['50%', '70%'], startAngle: 180, endAngle: 0, // 设置为灰色背景 itemStyle: { color: '#e0e0e0' }, // 禁用标签和交互 label: { show: false }, labelLine: { show: false }, // 不响应鼠标事件 silent: true, // 数据：一个完整的半圆 data: [{ value: 100, name: '背景' }] }, // 第二层：半饼图（实际数据） { name: '实际数据', type: 'pie', radius: ['50%', '70%'], startAngle: 180, endAngle: 0, // 计算实际角度（假设完成度为65%） // 180度 * 0.65 = 117度，所以结束角度为180 - 117 = 63 endAngle: 63, label: { show: true, position: 'center', formatter: '{d}%', fontSize: 24, color: '#333' }, labelLine: { show: false }, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#5470c6' }, { offset: 1, color: '#91cc75' } ]) }, data: [{ value: 65, name: '完成度' }] } ] };

3. 动态数据更新与动画

// 动态更新数据的函数 function updateHalfPieChart(chart, newData) { // 计算总和 const total = newData.reduce((sum, item) => sum + item.value, 0); // 更新配置 chart.setOption({ series: [{ data: newData, // 可以添加动画配置 animationDuration: 1000, animationEasing: 'cubicOut' }] }); } // 示例：模拟实时数据更新 setInterval(() => { // 生成随机数据 const randomData = [ { value: Math.floor(Math.random() * 500) + 100, name: '直接访问' }, { value: Math.floor(Math.random() * 500) + 100, name: '邮件营销' }, { value: Math.floor(Math.random() * 500) + 100, name: '联盟广告' } ]; updateHalfPieChart(myChart, randomData); }, 3000);

4. 自定义颜色与渐变效果

const colorOption = { series: [{ // 使用自定义颜色数组 color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'], // 或者使用渐变色（需要echarts.graphic.LinearGradient） itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [ { offset: 0, color: '#83bff6' }, { offset: 0.5, color: '#188df0' }, { offset: 1, color: '#188df0' } ]), // 添加阴影效果 shadowBlur: 5, shadowColor: 'rgba(0, 0, 0, 0.2)' } }] };

5. 响应式与自适应配置

// 响应式配置 const responsiveOption = { // 根据容器尺寸动态调整 series: [{ // 使用函数根据容器尺寸计算半径 radius: function(container) { const width = container.getWidth(); if (width < 400) { return ['30%', '50%']; // 小屏幕使用较小半径 } else if (width < 800) { return ['40%', '60%']; } else { return ['45%', '70%']; } }, // 标签自适应 label: { fontSize: function() { const width = myChart.getDom().offsetWidth; return width < 500 ? 10 : 12; } } }] };

常见问题与解决方案

1. 标签重叠问题

问题：当数据项较多时，标签可能重叠。

解决方案：

series: [{ label: { // 方案1：调整标签位置 position: 'outside', // 方案2：隐藏部分标签 formatter: function(params) { // 只显示大于5%的数据标签 if (params.percent > 5) { return `${params.name}: ${params.percent}%`; } return ''; } }, // 方案3：使用引导线 labelLine: { show: true, length: 20, length2: 15, smooth: true // 平滑曲线 } }]

2. 半饼图方向错误

问题：半饼图显示方向与预期不符。

解决方案：

// 确保角度设置正确 // 从左到右：startAngle: 180, endAngle: 0 // 从上到下：startAngle: 270, endAngle: 90 // 从右到左：startAngle: 0, endAngle: 180 // 从下到上：startAngle: 90, endAngle: 270 // 调试代码：打印当前角度 console.log('当前起始角度:', option.series[0].startAngle); console.log('当前结束角度:', option.series[0].endAngle);

3. 数据更新动画不流畅

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

解决方案：

// 优化动画配置 series: [{ // 关闭不必要的动画 animation: true, animationDuration: 800, animationEasing: 'cubicOut', // 数据更新时使用增量动画 animationDurationUpdate: 500, animationEasingUpdate: 'cubicOut' }]

实战案例：销售完成率仪表盘

下面是一个完整的实战案例，展示如何将半饼图应用于销售完成率仪表盘：

// 完整的销售完成率仪表盘配置 const salesDashboardOption = { // 背景颜色 backgroundColor: '#f8f9fa', // 标题 title: { text: '销售完成率', left: 'center', top: '5%', textStyle: { fontSize: 20, color: '#2c3e50', fontWeight: 'bold' } }, // 工具提示 tooltip: { trigger: 'item', formatter: function(params) { if (params.seriesName === '完成率') { return `${params.name}<br/>目标：1000万<br/>实际：${params.value}万<br/>完成率：${params.percent}%`; } return ''; }, backgroundColor: 'rgba(50, 50, 50, 0.9)', borderColor: '#333', textStyle: { color: '#fff' } }, // 图例（隐藏） legend: { show: false }, // 系列配置 series: [ // 背景半圆（灰色） { name: '背景', type: 'pie', radius: ['55%', '75%'], startAngle: 180, endAngle: 0, // 禁用交互 silent: true, // 禁用标签 label: { show: false }, labelLine: { show: false }, // 灰色背景 itemStyle: { color: '#e9ecef' }, // 数据：完整的半圆 data: [{ value: 100, name: '背景' }] }, // 完成率（渐变色） { name: '完成率', type: 'pie', radius: ['55%', '75%'], startAngle: 180, // 动态计算结束角度（假设完成率75%） endAngle: 180 - (180 * 0.75), // 180 - 135 = 45 // 标签配置（中心显示） label: { show: true, position: 'center', formatter: function(params) { // 只显示中心标签 if (params.seriesName === '完成率') { return `{val|${params.percent}%}n{name|完成率}`; } return ''; }, rich: { val: { fontSize: 36, fontWeight: 'bold', color: '#2c3e50', lineHeight: 45 }, name: { fontSize: 14, color: '#7f8c8d', lineHeight: 20 } } }, // 引导线（隐藏） labelLine: { show: false }, // 渐变色 itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#5470c6' }, { offset: 0.5, color: '#91cc75' }, { offset: 1, color: '#fac858' } ]), // 阴影效果 shadowBlur: 10, shadowColor: 'rgba(84, 112, 198, 0.5)' }, // 数据 data: [{ value: 75, name: '完成率' }] }, // 进度指示点（可选） { name: '指示点', type: 'pie', radius: ['45%', '45%'], startAngle: 180, endAngle: 45, // 只显示一个点 label: { show: false }, labelLine: { show: false }, itemStyle: { color: '#fff', borderColor: '#5470c6', borderWidth: 3 }, // 数据：一个点 data: [{ value: 1, name: '指示点' }] } ] }; // 渲染图表 myChart.setOption(salesDashboardOption);

总结

半饼图是ECharts中一个强大而灵活的可视化工具，通过合理配置起始和结束角度，可以创建出美观且实用的图表。掌握半饼图的关键在于：

理解角度系统：ECharts使用标准的数学角度系统，0°在3点钟方向
合理配置半径：使用数组形式['内半径%', '外半径%']创建圆环效果
善用标签和引导线：优化标签显示避免重叠
结合渐变和阴影：提升视觉效果
考虑响应式：确保在不同设备上正常显示

通过本文的教程和示例，您应该能够熟练使用ECharts绘制各种半饼图，并根据实际需求进行定制化开发。在实际项目中，建议先明确业务需求，再选择合适的配置方案，最后进行充分的测试和优化。# ECharts绘制半饼图详细教程与实用技巧分享

引言：什么是半饼图及其应用场景

半饼图的核心优势：

视觉焦点集中：半圆形状天然引导视线，突出关键数据
空间利用率高：相比完整饼图，半饼图占用更少的垂直空间
美观现代：符合现代UI设计趋势，常用于仪表盘和数据大屏
信息层次清晰：便于在同一页面展示多个数据维度

典型应用场景：

仪表盘：展示KPI完成度、预算使用率等
数据大屏：作为核心指标的可视化组件
移动端报表：节省屏幕空间，提升用户体验
进度展示：任务完成度、项目进度等

ECharts基础环境准备

在开始绘制半饼图之前，需要确保ECharts环境已经正确配置。

1. 引入ECharts库

<!-- 方式1：通过CDN引入（推荐用于快速原型开发） --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <!-- 方式2：通过npm安装（推荐用于生产环境） --> <!-- 在项目中执行：npm install echarts -->

2. 准备容器元素

<!-- 在HTML中创建一个具备尺寸的容器 --> <div id="halfPieChart" style="width: 600px; height: 400px;"></div>

3. 初始化ECharts实例

// 获取DOM容器 const chartDom = document.getElementById('halfPieChart'); // 初始化ECharts实例 const myChart = echarts.init(chartDom);

半饼图核心实现原理

半饼图的实现基于ECharts饼图（pie）系列，通过起始角度（startAngle）和结束角度（endAngle）参数来控制饼图的显示范围。

核心参数说明

参数名	类型	默认值	说明
startAngle	number	90	饼图起始角度（从正上方开始，顺时针为正）
endAngle	number	-270	饼图结束角度（从正上方开始，顺时针为正）

角度计算规则：

0°：正右方（3点钟方向）
90°：正上方（12点钟方向）
360°：回到正右方
负数角度：表示逆时针方向

半饼图角度设置：

startAngle: 180（从正左方开始）
endAngle: 0（到正右方结束）
这样就能得到一个从左到右的半圆饼图

基础半饼图实现代码

下面是一个完整的半饼图实现示例，包含详细的代码注释：

// 1. 准备数据 const data = [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' } ]; // 2. 配置项 const option = { // 标题配置 title: { text: '半饼图示例', left: 'center', top: 20, textStyle: { fontSize: 18, color: '#333' } }, // 工具提示 tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' }, // 图例配置 legend: { orient: 'vertical', left: 'left', data: data.map(item => item.name) }, // 系列配置（核心部分） series: [ { name: '访问来源', type: 'pie', // 饼图类型 radius: ['40%', '70%'], // 内半径和外半径（形成圆环效果） avoidLabelOverlap: false, // 关键：角度设置（实现半饼图） startAngle: 180, // 从正左方开始 endAngle: 0, // 到正右方结束 // 标签配置 label: { show: true, position: 'outside', // 标签显示在外部 formatter: '{b}: {d}%' // 显示名称和百分比 }, // 引导线配置 labelLine: { show: true, length: 15, length2: 10, smooth: true }, // 数据项样式 itemStyle: { borderRadius: 5, borderColor: '#fff', borderWidth: 2 }, // 高亮样式 emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold' }, itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, // 数据 data: data } ] }; // 3. 渲染图表 myChart.setOption(option); // 4. 响应式处理（可选） window.addEventListener('resize', function() { myChart.resize(); });

进阶技巧与实用配置

1. 不同方向的半饼图

通过调整起始和结束角度，可以创建不同方向的半饼图：

// 从上到下的半饼图（垂直方向） const verticalOption = { series: [{ startAngle: 270, // 从正下方开始 endAngle: 90, // 到正上方结束 // 其他配置同上 }] }; // 从右到左的半饼图（水平镜像） const mirrorOption = { series: [{ startAngle: 0, // 从正右方开始 endAngle: 180, // 到正左方结束 // 其他配置同上 }] };

2. 半饼图与仪表盘结合

半饼图常与仪表盘结合使用，形成复合图表：

const dashboardOption = { series: [ // 第一层：半饼图（作为背景） { name: '背景', type: 'pie', radius: ['50%', '70%'], startAngle: 180, endAngle: 0, // 设置为灰色背景 itemStyle: { color: '#e0e0e0' }, // 禁用标签和交互 label: { show: false }, labelLine: { show: false }, // 不响应鼠标事件 silent: true, // 数据：一个完整的半圆 data: [{ value: 100, name: '背景' }] }, // 第二层：半饼图（实际数据） { name: '实际数据', type: 'pie', radius: ['50%', '70%'], startAngle: 180, endAngle: 0, // 计算实际角度（假设完成度为65%） // 180度 * 0.65 = 117度，所以结束角度为180 - 117 = 63 endAngle: 63, label: { show: true, position: 'center', formatter: '{d}%', fontSize: 24, color: '#333' }, labelLine: { show: false }, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#5470c6' }, { offset: 1, color: '#91cc75' } ]) }, data: [{ value: 65, name: '完成度' }] } ] };

3. 动态数据更新与动画

// 动态更新数据的函数 function updateHalfPieChart(chart, newData) { // 计算总和 const total = newData.reduce((sum, item) => sum + item.value, 0); // 更新配置 chart.setOption({ series: [{ data: newData, // 可以添加动画配置 animationDuration: 1000, animationEasing: 'cubicOut' }] }); } // 示例：模拟实时数据更新 setInterval(() => { // 生成随机数据 const randomData = [ { value: Math.floor(Math.random() * 500) + 100, name: '直接访问' }, { value: Math.floor(Math.random() * 500) + 100, name: '邮件营销' }, { value: Math.floor(Math.random() * 500) + 100, name: '联盟广告' } ]; updateHalfPieChart(myChart, randomData); }, 3000);

4. 自定义颜色与渐变效果

const colorOption = { series: [{ // 使用自定义颜色数组 color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'], // 或者使用渐变色（需要echarts.graphic.LinearGradient） itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [ { offset: 0, color: '#83bff6' }, { offset: 0.5, color: '#188df0' }, { offset: 1, color: '#188df0' } ]), // 添加阴影效果 shadowBlur: 5, shadowColor: 'rgba(0, 0, 0, 0.2)' } }] };

5. 响应式与自适应配置

// 响应式配置 const responsiveOption = { // 根据容器尺寸动态调整 series: [{ // 使用函数根据容器尺寸计算半径 radius: function(container) { const width = container.getWidth(); if (width < 400) { return ['30%', '50%']; // 小屏幕使用较小半径 } else if (width < 800) { return ['40%', '60%']; } else { return ['45%', '70%']; } }, // 标签自适应 label: { fontSize: function() { const width = myChart.getDom().offsetWidth; return width < 500 ? 10 : 12; } } }] };

常见问题与解决方案

1. 标签重叠问题

问题：当数据项较多时，标签可能重叠。

解决方案：

series: [{ label: { // 方案1：调整标签位置 position: 'outside', // 方案2：隐藏部分标签 formatter: function(params) { // 只显示大于5%的数据标签 if (params.percent > 5) { return `${params.name}: ${params.percent}%`; } return ''; } }, // 方案3：使用引导线 labelLine: { show: true, length: 20, length2: 15, smooth: true // 平滑曲线 } }]

2. 半饼图方向错误

问题：半饼图显示方向与预期不符。

解决方案：

// 确保角度设置正确 // 从左到右：startAngle: 180, endAngle: 0 // 从上到下：startAngle: 270, endAngle: 90 // 从右到左：startAngle: 0, endAngle: 180 // 从下到上：startAngle: 90, endAngle: 270 // 调试代码：打印当前角度 console.log('当前起始角度:', option.series[0].startAngle); console.log('当前结束角度:', option.series[0].endAngle);

3. 数据更新动画不流畅

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

解决方案：

// 优化动画配置 series: [{ // 关闭不必要的动画 animation: true, animationDuration: 800, animationEasing: 'cubicOut', // 数据更新时使用增量动画 animationDurationUpdate: 500, animationEasingUpdate: 'cubicOut' }]

实战案例：销售完成率仪表盘

下面是一个完整的实战案例，展示如何将半饼图应用于销售完成率仪表盘：

// 完整的销售完成率仪表盘配置 const salesDashboardOption = { // 背景颜色 backgroundColor: '#f8f9fa', // 标题 title: { text: '销售完成率', left: 'center', top: '5%', textStyle: { fontSize: 20, color: '#2c3e50', fontWeight: 'bold' } }, // 工具提示 tooltip: { trigger: 'item', formatter: function(params) { if (params.seriesName === '完成率') { return `${params.name}<br/>目标：1000万<br/>实际：${params.value}万<br/>完成率：${params.percent}%`; } return ''; }, backgroundColor: 'rgba(50, 50, 50, 0.9)', borderColor: '#333', textStyle: { color: '#fff' } }, // 图例（隐藏） legend: { show: false }, // 系列配置 series: [ // 背景半圆（灰色） { name: '背景', type: 'pie', radius: ['55%', '75%'], startAngle: 180, endAngle: 0, // 禁用交互 silent: true, // 禁用标签 label: { show: false }, labelLine: { show: false }, // 灰色背景 itemStyle: { color: '#e9ecef' }, // 数据：完整的半圆 data: [{ value: 100, name: '背景' }] }, // 完成率（渐变色） { name: '完成率', type: 'pie', radius: ['55%', '75%'], startAngle: 180, // 动态计算结束角度（假设完成率75%） endAngle: 180 - (180 * 0.75), // 180 - 135 = 45 // 标签配置（中心显示） label: { show: true, position: 'center', formatter: function(params) { // 只显示中心标签 if (params.seriesName === '完成率') { return `{val|${params.percent}%}n{name|完成率}`; } return ''; }, rich: { val: { fontSize: 36, fontWeight: 'bold', color: '#2c3e50', lineHeight: 45 }, name: { fontSize: 14, color: '#7f8c8d', lineHeight: 20 } } }, // 引导线（隐藏） labelLine: { show: false }, // 渐变色 itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#5470c6' }, { offset: 0.5, color: '#91cc75' }, { offset: 1, color: '#fac858' } ]), // 阴影效果 shadowBlur: 10, shadowColor: 'rgba(84, 112, 198, 0.5)' }, // 数据 data: [{ value: 75, name: '完成率' }] }, // 进度指示点（可选） { name: '指示点', type: 'pie', radius: ['45%', '45%'], startAngle: 180, endAngle: 45, // 只显示一个点 label: { show: false }, labelLine: { show: false }, itemStyle: { color: '#fff', borderColor: '#5470c6', borderWidth: 3 }, // 数据：一个点 data: [{ value: 1, name: '指示点' }] } ] }; // 渲染图表 myChart.setOption(salesDashboardOption);