嗨，我是 Agnes。今天咱们不聊那些枯燥的教科书定义，直接切入正题。ECharts 作为百度开源的前端可视化库，在国内真的是“国民级”的存在。但很多小伙伴在实际项目里，往往是“看着别人 demo 跑通了，自己一写就报错”，或者图表卡顿得让人想砸键盘。
这篇攻略我会带你把柱状图、折线图、关系图这三类最核心、最高频的图表吃透，同时把那些让人头秃的坑点排错和性能优化方案一次性讲清楚。咱们目标是：看完不仅能画出来，还能画得快、画得稳、画得好看。
第一部分：柱状图（Bar Chart）—— 数据对比的基石
柱状图是 ECharts 里最基础，也是最容易被低估的图表。很多人觉得它简单，结果在堆叠、分组、双向这些高级用法上栽了跟头。
1.1 基础柱状图：别只盯着 series
一个标准的柱状图，核心在于 xAxis、yAxis 和 series 的协调。但新手最容易犯的错误是：把类目轴和数据轴搞混，或者不知道如何定制柱子的样式。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// 坑点提示：如果柱子弹出气泡显示数值，这里要调整 grid，否则可能遮挡
},
yAxis: {
type: 'value',
// 建议加上 min: 0，防止刻度从非零开始产生误导
min: 0
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar',
// 个性化柱子颜色，可以用渐变色提升质感
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
])
},
// 柱子宽度控制，避免过密
barWidth: '60%'
}]
};
1.2 进阶用法：堆叠柱状图与分组柱状图
堆叠（Stack）：用于展示“总量”以及“各部分占比”。比如展示每月总销售额，以及其中线上、线下、会员的贡献。
分组（Group）：用于对比不同维度在同一类目下的表现。比如对比 A/B 两个班级，每周的数学成绩。
堆叠柱状图实战
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: { data: ['Direct', 'Email', 'Ads', 'Search'] },
xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
yAxis: { type: 'value' },
series: [
{ name: 'Direct', type: 'bar', stack: 'total', data: [320, 332, 301, 334, 390, 330, 320] },
{ name: 'Email', type: 'bar', stack: 'total', data: [120, 132, 101, 134, 90, 230, 210] },
{ name: 'Ads', type: 'bar', stack: 'total', data: [220, 182, 191, 234, 290, 330, 310] },
{ name: 'Search', type: 'bar', stack: 'total', data: [150, 232, 201, 154, 190, 330, 410] }
]
};
关键点：所有需要堆叠的 series 必须设置相同的 stack 属性值（如 'total'）。如果不设，它们会并排显示而不是堆叠。
分组柱状图实战
option = {
tooltip: { trigger: 'axis' },
legend: { data: ['A班', 'B班'] },
xAxis: { type: 'category', data: ['数学', '语文', '英语', '物理'] },
yAxis: { type: 'value' },
series: [
{ name: 'A班', type: 'bar', data: [88, 92, 78, 85] },
{ name: 'B班', type: 'bar', data: [82, 85, 88, 80] }
]
};
关键点：分组柱状图不需要 stack 属性。ECharts 会自动将同一 x 轴类目下的不同 series 并排展示。
1.3 双向柱状图（瀑布流/正负值对比）
这是面试官很喜欢问的考点。比如展示“收入 vs 支出”，或者“今年同比去年增长/下降”。
option = {
tooltip: { trigger: 'axis' },
legend: { data: ['收入', '支出'] },
xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
yAxis: { type: 'value' },
series: [
{
name: '收入',
type: 'bar',
data: [1200, 1320, 1400, 1500],
itemStyle: { color: '#5470c6' }
},
{
name: '支出',
type: 'bar',
data: [-800, -900, -1000, -1100], // 负值！
itemStyle: { color: '#91cc75' }
}
]
};
原理：通过给支出数据加负号，让它向下延伸，从而实现“双向”效果。这是一种巧妙且常用的技巧。
第二部分：折线图（Line Chart）—— 趋势分析的利器
折线图是描述数据随时间变化趋势的最佳选择。除了基础的线，面积图、平滑曲线、标记点是提升图表表现力的关键。
2.1 基础折线图与平滑曲线
很多 UI 设计稿里的折线图是圆滑的，默认 ECharts 是尖角的。只需要加一个属性：smooth: true。
option = {
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
// 数据间隔大时，可以设置 boundaryGap: false，让折线顶到轴边
boundaryGap: false
},
yAxis: { type: 'value' },
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true, // 平滑曲线
// 可选：设置更多平滑级别，0 为折线，1 为最平滑，默认 0.5
// smooth: 1
}]
};
2.2 面积图（Line + Area）
面积图能更直观地体现“量”的累积感。通过设置 areaStyle 即可。
option = {
xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
yAxis: { type: 'value' },
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
// 填充区域样式
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(54, 145, 251, 0.5)' },
{ offset: 1, color: 'rgba(54, 145, 251, 0.05)' }
])
},
// 连接线样式
lineStyle: {
width: 3,
color: '#3691fb'
}
}]
};
视觉技巧：面积图通常配合渐变色，从上方深色逐渐过渡到下方透明，这样视觉上更轻盈，不会显得沉闷。
2.3 多条折线对比与样式区分
当有多条折线时，颜色、线型（实线/虚线）的区分至关重要。
option = {
legend: { data: ['蒸发量', '降水量', '平均温度'] },
xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] },
yAxis: [
{ type: 'value', name: '降水量', position: 'left' },
{ type: 'value', name: '温度', position: 'right' } // 双Y轴
],
series: [
{
name: '蒸发量',
type: 'line',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
smooth: true
},
{
name: '降水量',
type: 'line',
yAxisIndex: 0, // 对应左侧Y轴
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
smooth: true,
// 虚线区分
lineStyle: { type: 'dashed' }
},
{
name: '平均温度',
type: 'line',
yAxisIndex: 1, // 对应右侧Y轴
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
smooth: true,
// 自定义颜色
itemStyle: { color: '#ff7f50' }
}
]
};
双Y轴技巧：当两个数据的量级差异巨大时（如降水量几百，温度几十），必须使用双 Y 轴，并通过 yAxisIndex 指定每条线对应哪个轴，否则线条会挤在一起无法辨认。
第三部分：关系图（Graph）—— 复杂网络的可视化
如果说柱状图和折线图是二维的，那关系图就是三维甚至多维的。它用于展示节点（Node）和边（Link）之间的关系，常见于社交网络、组织架构、知识图谱等场景。
3.1 基础关系图结构
关系图的数据结构分为 nodes 和 links 两部分。
option = {
title: { text: '社交关系图谱' },
tooltip: {},
legend: { data: ['盟友', '敌人', '路人'] },
series: [
{
type: 'graph',
layout: 'force', // 力引导布局，让节点自动分散
data: [
{ name: '节点A', symbolSize: 50 },
{ name: '节点B', symbolSize: 30 },
{ name: '节点C', symbolSize: 40 },
{ name: '节点D', symbolSize: 20 }
],
links: [
{ source: '节点A', target: '节点B', lineStyle: { color: 'red' } },
{ source: '节点A', target: '节点C' },
{ source: '节点B', target: '节点C' },
{ source: '节点C', target: '节点D' }
],
// 力引导布局参数，防止节点重叠或过于分散
force: {
repulsion: 100, // 斥力，值越大节点越分散
edgeLength: 150 // 边长，值越小节点越聚集
},
roam: true, // 允许缩放和平移
label: { show: true }
}
]
};
3.2 力引导布局（Force Layout）详解
关系图最让人头疼的往往是布局混乱。ECharts 提供了 force 系列布局参数，是调整图表美观度的核心。
- repulsion（斥力）：节点之间的排斥力。值太小，节点会挤成一团；值太大，节点会散得太开。通常建议从
50开始尝试，逐步调整到100-300。 - edgeLength（边长）：相邻节点的理想距离。值越小，图越紧凑；值越大，图越舒展。
- gravity（重力）：所有节点受到的指向中心的引力。防止节点飘出画布。
3.3 富节点与富边：分类与样式
为了让图表更有信息量，我们需要给节点和边赋予不同的语义颜色。
series: [{
type: 'graph',
layout: 'force',
// 分类数据
categories: [{ name: '核心人物' }, { name: '配角' }, { name: '背景' }],
data: [
{ name: '人物A', category: 0, symbolSize: 60, label: { fontSize: 16, fontWeight: 'bold' } },
{ name: '人物B', category: 1, symbolSize: 40 },
{ name: '人物C', category: 1, symbolSize: 40 },
{ name: '人物D', category: 2, symbolSize: 20 }
],
links: [
{ source: '人物A', target: '人物B', lineStyle: { width: 3, curveness: 0.2 } }, // 弯曲的边
{ source: '人物A', target: '人物C', lineStyle: { width: 2 } },
{ source: '人物B', target: '人物D', lineStyle: { type: 'dashed' } } // 虚线表示弱关系
],
force: { repulsion: 200, edgeLength: 100 }
}]
亮点技巧：
- symbolSize：节点大小可以映射重要性。
- curveness：边的弯曲度，当两个节点之间有多条边，或者边过多时，弯曲可以减少重叠。
- lineStyle.type：实线、虚线可以表达关系的强弱或类型。
第四部分：常见坑点排错（Troubleshooting）
这是实战中最痛苦的部分。当你发现图表不显示、错乱或报错时，请按以下顺序排查：
4.1 图表不显示（空白页）
- 容器高度为 0：这是最常见的原因。ECharts 必须挂载在一个有明确高度的 DOM 元素上。检查你的 CSS，确保
#chart-container有height: 400px之类的显式高度。如果是嵌套在弹窗或 Tab 里，可能需要延迟初始化或在显示后重新 resize。 - 数据为空：检查 API 返回的数据是否真的存在。如果
series.data是[]或null，图表会报错或显示空白。 - 类型错误：
xAxis.type必须是'category'或'value'，不能拼错。series.type必须是'bar'、'line'等合法值。
4.2 柱状图柱子重叠或消失
- 堆叠未设置：如果多个 series 想堆叠，必须给它们设置相同的
stack名称。如果没有设置，它们会并排；如果并排且数据量太大，柱子会变得极细，看起来像消失。 - Y 轴范围问题：检查
yAxis.min和yAxis.max。如果数据全是负数，但min设为 0，柱子就不会显示。 - 条形图方向：如果柱子是横着的（条形图），确保
xAxis和yAxis的 `type