ECharts图表类型详解：折线图、柱状图与饼图
(6) feilong.org 修订于2026-10-03 16:39:54 echarts教程ECharts图表类型详解：折线图、柱状图与饼图
ECharts 是百度开源的可视化图表库，广泛应用于数据展示场景。本文将深入解析三种基础且常用的图表类型——折线图、柱状图和饼图，涵盖其核心配置项及适用场景，并通过代码示例演示具体实现方式。
---
一、折线图（Line Chart）
折线图适用于表现数据随时间或顺序变化的趋势关系，常用于时间序列分析或连续数据对比。
核心配置项
1. series类型：设置为 line。
2. data字段：存储数值数组，支持多维数据（如
|
1 |
[x, y] |
）。
3. xAxis/yAxis：定义坐标轴类型（如 category 或 value）。
示例代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { name: '销售额', type: 'line', data: [120, 200, 150, 80, 70, 110, 130] } ] }; |
应用场景
- 销售数据趋势分析
- 温度变化监测
- 用户活跃度统计
---
二、柱状图（Bar Chart）
柱状图通过条形长度或高度直观展示不同类别的数据对比，适合离散型数据的可视化。
核心配置项
1. series类型：设置为 bar。
2. data字段：数值数组，可直接使用一维数据。
3. xAxis/yAxis：通常将分类标签设为 category 轴。
示例代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
option = { xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: { type: 'value' }, series: [ { name: '数量', type: 'bar', data: [50, 70, 30, 120, 80] } ] }; |
应用场景
- 产品销量对比
- 市场份额分析
- 学科成绩分布
---
三、饼图（Pie Chart）
饼图通过扇形面积占比展示数据的组成部分，适用于表现比例关系。
核心配置项
1. series类型：设置为 pie。
2. data字段：包含 value 和 name 的对象数组。
3. radius：控制饼图半径（如
|
1 |
'50%' |
）。
示例代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
option = { series: [ { name: '访问来源', type: 'pie', radius: '50%', data: [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 274, name: '联盟广告' }, { value: 135, name: '视频广告' } ] } ] }; |
应用场景
- 用户来源分布统计
- 市场细分比例分析
- 财务支出结构展示
---
四、进阶技巧与注意事项
1. 数据格式统一性：确保 xAxis 和 series.data 的维度一致，避免显示错误。
2. 动态更新支持：通过 setOption 方法实现图表数据的实时刷新。
3. 样式定制化：使用 itemStyle 或 label 配置项调整颜色、字体等视觉效果。
示例：动态更新数据
|
1 2 3 4 5 6 7 8 9 10 11 |
// 初始化图表 var chart = echarts.init(document.getElementById('chart')); // 动态更新数据 function updateData(newData) { chart.setOption({ series: [{ data: newData }] }); } |
---
结语
折线图、柱状图和饼图作为ECharts的基础类型，覆盖了绝大多数数据分析场景。理解其配置逻辑与适用范围，能够显著提升数据可视化效果。实际开发中可根据需求组合多种图表类型，并结合交互功能（如缩放、筛选）增强用户体验。
通过本文的实践示例，读者可快速掌握核心用法，并在项目中灵活应用。对于更复杂的需求（如动态数据加载或多维度分析），建议进一步查阅[ECharts官方文档](https://echarts.apache.org/zh/index.html)以获取完整支持。
更新网址：https://feilong.org/echarts-chart-types-explained
最初发布：20261003 04:39:54 feilong.org 于广州
加入收藏夹，查看更方便。