核心配置项详解
🎯 引言
上一篇我们用一个大配置对象画出了柱状图，但里面每个字段是干什么的还说不清。学会这篇文章，你能看懂 option 的整体结构，掌握 title、tooltip、legend、坐标轴、series 这五大核心配置，拿到任何配置文档都不再发懵。
🧱 option 是什么
setOption() 接收的那个大对象就叫 option，它是图表的“设计图纸”：图表长什么样、显示什么数据、有什么交互，全都写在里面。
可以把它想象成一份点菜单：
title：这道菜的菜名（标题）legend：配菜清单（图例）xAxis/yAxis：摆盘的横竖格子（坐标轴）series：真正的食材（数据和图表类型）tooltip：服务员的介绍（悬停提示）
🧱 标题与提示框
title 控制图表标题，常用的是主标题和副标题：
title: {
text: '一周销量',
subtext: '数据来源：后台统计',
left: 'center',
},
tooltip 是鼠标悬停时弹出的提示框，加上它图表立马“活”起来：
tooltip: {
trigger: 'axis',
},
trigger 有两个常用值，区别一定要分清：
'item'：鼠标悬停在单个图形上才触发，适合饼图、散点图。'axis'：鼠标悬停在坐标轴刻度上触发，一次显示该位置所有系列的数据，适合折线图、柱状图。
🧱 图例 legend
当图表里有多个系列（比如同时展示“销量”和“利润”），就需要 legend 告诉读者每种颜色代表什么：
legend: {
data: ['销量', '利润'],
},
legend.data 里的每一项必须和 series 里对应系列的 name完全一致，图例才能正常显示和联动。这是初学者容易忽略的对应关系。🧱 坐标轴 xAxis 与 yAxis
直角坐标系图表（折线图、柱状图等）离不开两个轴：
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五'],
},
yAxis: {
type: 'value',
},
type 的两个常用取值：
'category'：类目轴，显示离散的分类名称，数据写在data里。'value'：数值轴，根据系列数据自动生成刻度，不用写data。
xAxis 改成 'value'、yAxis 改成 'category' 并对调数据即可，坐标轴的方向决定了柱子的朝向。🧱 系列 series：数据的核心
series 是一个数组，每一项代表一组数据 + 一种图表类型：
series: [
{
name: '销量',
type: 'bar',
data: [120, 200, 150, 80, 70],
},
{
name: '利润',
type: 'line',
data: [20, 50, 30, 10, 15],
},
],
一份 option 里可以放多个系列，上面这段代码就实现了柱状图和折线图的混合图表。
💡 完整示例串一遍
把五大配置组合起来：
chart.setOption({
title: {
text: '一周销量与利润',
},
tooltip: {
trigger: 'axis',
},
legend: {
data: ['销量', '利润'],
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五'],
},
yAxis: {
type: 'value',
},
series: [
{
name: '销量',
type: 'bar',
data: [120, 200, 150, 80, 70],
},
{
name: '利润',
type: 'line',
data: [20, 50, 30, 10, 15],
},
],
});
🧾 小节总结
- option 是图表的“设计图纸”，外观、数据、交互都由它描述。
title管标题，tooltip管悬停提示，legend管图例。tooltip.trigger选'axis'（折线/柱状）或'item'（饼图/散点）。legend.data必须与系列的name完全一致才能联动。series是数组，每项一组数据加一种type，多系列可实现混合图表。
❓ 知识问答
Q1：为什么图例不显示？
先检查 legend.data 是否和 series 里的 name 完全一致，包括大小写和中文字符。
Q2：tooltip 不加会怎样？
图表照常显示，但鼠标悬停时没有数值提示。实际项目基本都建议加上。
Q3：yAxis 为什么不写 data？
数值轴的刻度是 ECharts 根据系列数据自动计算的，写了反而会限制它。只有类目轴才需要手动给 data。
Q4：series 里能放几种不同的 type？
没有数量限制。常见的组合是柱状图加折线图，一个看总量、一个看趋势。
🧪 小练习
补全下面的配置，画出“三门课程的成绩对比图”：
xAxis显示语文、数学、英语三科。- 系列一是“小明”的成绩（柱状图）：80、90、85。
- 系列二是“小红”的成绩（柱状图）：85、88、92。
- 配上标题、图例和 axis 触发的提示框。
chart.setOption({
// 请在这里编写代码
});
🎉 恭喜你已经能看懂并写出完整的 option 了！下一篇我们逐个学习常用的图表类型，让你的图表库丰富起来。