异常教程
ECharts 饼图（手把手讲解）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观
在数据可视化领域，饼图（Pie Chart）凭借其直观的扇形展示形式，成为最基础且应用广泛的图表类型之一。而 ECharts 饼图 凭借其灵活的配置选项、丰富的交互功能和跨平台兼容性，成为开发者构建数据可视化项目的首选工具。无论是分析市场占比、用户分布，还是展示项目进度，ECharts 饼图都能通过简洁的代码实现专业级的可视化效果。本文将从零开始，逐步解析如何使用 ECharts 创建并优化饼图，并结合实际案例帮助读者掌握核心技能。
基础配置与核心概念
1. 环境准备与基本结构
要使用 ECharts 饼图，首先需要引入 ECharts 的 JavaScript 库。对于初学者，可以通过 CDN 引入：
<!-- 在 HTML 文件中引入 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
接下来，创建一个容器（如 <div>）用于承载图表：
<div id="pieChart" style="width: 600px; height: 400px;"></div>
2. 配置项的层级逻辑
ECharts 的配置项采用对象嵌套结构，核心模块包括：
- title：图表标题
- tooltip：鼠标悬停时的提示信息
- series：数据系列（饼图的核心配置）
示例代码：
const chart = echarts.init(document.getElementById('pieChart'));
chart.setOption({
title: { text: '季度销售占比' },
tooltip: {},
series: [{
type: 'pie',
data: [
{ value: 335, name: '第一季度' },
{ value: 310, name: '第二季度' }
]
}]
});
关键点解析：
type: 'pie'明确指定图表类型为饼图data数组中的每个对象包含value（数值）和name（标签文本）
数据格式与样式控制
1. 数据结构的规范与优化
饼图的 data 数组需要满足以下条件：
- 每个对象必须包含
value和name属性 - 数值需为非负数，否则会被忽略
进阶技巧：
可以通过 sort 参数控制数据排序逻辑：
series: [{
// 按 value 降序排列
sort: 'desc',
data: [...]
}]
2. 核心样式配置项
| 配置项 | 作用描述 | 默认值 |
|---|---|---|
| radius | 饼图半径（百分比或像素值） | '50%' |
| center | 饼图中心坐标（相对于容器） | ['50%', '50%'] |
| itemStyle | 扇区边框、颜色等样式 | {} |
| label | 标签文本的字体、位置等 | {} |
示例：通过调整 radius 和 center 实现环形图效果：
series: [{
type: 'pie',
radius: ['40%', '70%'], // 内外半径比例
center: ['30%', '60%'], // 偏移至左下方
data: [...]
}]
交互增强与动态更新
1. 基础交互功能
ECharts 默认支持以下交互：
- 鼠标悬停高亮：通过
tooltip配置内容格式 - 点击事件：通过
series.emphasis控制选中效果 - 图例联动：通过
legend组件实现数据过滤
代码示例：
option = {
legend: { // 显示图例
data: ['第一季度', '第二季度']
},
series: [{
emphasis: { // 选中时的样式
itemStyle: { opacity: 0.5 }
}
}]
};
2. 动态数据更新
通过 chart.setOption() 可实现动态刷新：
// 假设数据源动态变化
function updateData(newData) {
chart.setOption({
series: [{
data: newData
}]
});
}
典型场景：结合后端接口实时更新销售数据。
进阶技巧与常见问题
1. 极坐标系与玫瑰图
通过 polar 坐标系可将饼图转换为 玫瑰图，使扇区面积与数值相关：
option = {
polar: true, // 启用极坐标系
series: [{
radius: ['0%', '70%'],
// 数据值决定扇区半径
}]
};
2. 多层饼图与嵌套数据
通过 radius 的多层配置实现信息分层：
series: [{
radius: ['0%', '30%'],
data: [/* 核心数据 */]
}, {
radius: ['40%', '70%'],
data: [/* 辅助数据 */]
}]
3. 常见问题解决
- 数据未显示：检查
value是否为数字，name是否与图例匹配 - 标签重叠：通过
label.position设置为'outside'或'inner'调整位置 - 颜色冲突：使用
itemStyle.color或全局主题配置echarts.init(..., 'dark')
实战案例：销售数据可视化
场景描述
假设某公司需展示四个季度的销售额占比，要求：
- 饼图居中显示
- 鼠标悬停显示百分比
- 点击后高亮选中项
完整代码实现
// HTML 结构保持不变
const chart = echarts.init(document.getElementById('pieChart'));
const option = {
title: {
text: '年度销售占比分析',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
series: [{
type: 'pie',
radius: '60%',
center: ['50%', '60%'],
data: [
{ value: 150, name: 'Q1' },
{ value: 180, name: 'Q2' },
{ value: 210, name: 'Q3' },
{ value: 240, name: 'Q4' }
],
itemStyle: {
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
position: 'inside',
formatter: '{d}%'
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
chart.setOption(option);
效果解析
- 标题与图例：左侧垂直图例便于数据对照
- 悬停提示：显示具体数值和百分比
- 高亮效果：点击后添加阴影增强视觉焦点
总结与扩展方向
通过本文的学习，读者应能掌握 ECharts 饼图 的基础配置、样式优化和交互设计。对于中级开发者，可进一步探索以下方向：
- 数据驱动动画：使用
animation属性实现数据加载动画 - 与后端集成：通过 REST API 动态获取数据
- 移动端适配：调整
responsive配置优化触摸交互 - 复杂场景应用：如结合地图的地理分布饼图
数据可视化的核心价值在于“让复杂信息一目了然”。ECharts 饼图凭借其直观的表达能力和灵活的配置选项，将成为开发者工具箱中不可或缺的利器。建议读者通过官方文档（ECharts 官网 ）深入探索更多功能，并尝试将所学知识应用到实际项目中。