4. ECharts 核心概念：option 配置项、series、xAxis/yAxis、grid、tooltip、legend 详解
好，咱们今天来啃 ECharts 最核心的东西——option 配置项。
说实话，ECharts 的 API 文档写得挺全的，但很多新手一上来就被那密密麻麻的配置项吓住了。我当年第一次看的时候，也是头皮发麻。后来做多了才发现，其实核心就那几个：series、xAxis/yAxis、grid、tooltip、legend。把这几个搞明白了，大屏上 80% 的图表你都能手到擒来。
4.1 option：一切图表的起点
ECharts 里所有的配置，都写在一个叫 option 的 JavaScript 对象里。你可以把它理解成一张「蓝图」——你告诉 ECharts 要画什么、画在哪、怎么画，它照着这张蓝图去渲染。
let option = {
title: { ... },
tooltip: { ... },
legend: { ... },
grid: { ... },
xAxis: { ... },
yAxis: { ... },
series: [ ... ]
};
嗯，结构就是这么简单。但要注意，option 是动态的。我在项目中经常遇到一种场景：图表已经渲染好了，但数据变了。这时候不需要重新 setOption 整个对象，只需要 myChart.setOption({ series: newData }) 就行。ECharts 会自动做增量更新，性能好很多。
myChart.clear()，然后再重新 setOption。但如果你只是想更新数据，千万别 clear，直接 setOption 新数据就好。
4.2 series：图表的灵魂
series 是 ECharts 里最重要的配置项，没有之一。它决定了你画的是折线图、柱状图、饼图还是散点图。
为什么叫 series？直译过来是「系列」。你可以理解成「一组数据 + 一种展现方式」。比如你要画两条折线，那就需要两个 series 对象。
series: [
{
name: '销售额',
type: 'line',
data: [120, 200, 150, 80, 70]
},
{
name: '利润',
type: 'bar',
data: [30, 50, 40, 20, 15]
}
]
你看，一个折线一个柱状，混搭着来。这在监控大屏上特别常见——用柱状图展示绝对值，用折线图展示趋势，一目了然。
我个人习惯把 series 里的 type 字段放在最前面，因为它是「灵魂」。你想想看，如果连图表类型都没定，后面的配置都是白搭。
barWidth，结果柱状图挤在一起，根本看不清。后来我养成了一个习惯：只要用柱状图，一定显式设置 barWidth 或 barCategoryGap。
4.3 xAxis / yAxis：坐标轴的门道
坐标轴看似简单，但坑不少。尤其是大屏上，坐标轴的标签、刻度、网格线，稍微没调好，整个图表就显得很「糙」。
先看一个最基础的配置：
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五']
},
yAxis: {
type: 'value',
min: 0,
max: 100
}
这里有个关键点：type 字段。x 轴通常是 'category'（类目轴），y 轴通常是 'value'（数值轴）。但如果你做的是时间序列图，x 轴应该用 'time' 类型，这样 ECharts 会自动处理时间格式和刻度间隔。
我记得有一次，客户要求在大屏上展示过去 7 天的数据，x 轴要显示「03-01、03-02」这样的格式。我一开始用 'category' 手动传数据，后来发现数据量一大，刻度标签就重叠了。换成 'time' 类型后，配合 axisLabel.formatter，问题迎刃而解。
'value' 类型的轴传了字符串数据，ECharts 会直接忽略掉。
4.4 grid：控制绘图区域
grid 决定了你的图表「画在哪里」。说白了，就是控制上下左右留白多少。
grid: {
left: '10%',
right: '10%',
top: 50,
bottom: 50,
containLabel: true
}
这里有个属性我特别想强调：containLabel。默认是 false，意思是 grid 区域不包含坐标轴的标签。如果你把 containLabel 设为 true，ECharts 会自动计算标签的宽度，确保标签不会被裁掉。
我在做大屏时，经常遇到一个问题：左侧的 y 轴标签太长（比如「同比增长率（%）」），结果被 grid 切掉了一半。后来我统一把 containLabel 设为 true，再也没出过这种问题。
grid 数组），一定要给每个 grid 设置不同的 top 和 bottom，否则图表会叠在一起。我曾经踩过这个坑，调试了半天才发现是 grid 重叠了。
4.5 tooltip：让数据「说话」
鼠标悬停时弹出的那个小框，就是 tooltip。别看它小，在大屏上可是「点睛之笔」。用户不需要盯着密密麻麻的数字看，鼠标移上去就能看到详细数据。
tooltip: {
trigger: 'axis',
formatter: function(params) {
let res = params[0].name + '<br/>';
params.forEach(function(item) {
res += item.marker + ' ' + item.seriesName + '：' + item.value + '<br/>';
});
return res;
}
}
trigger 有两个值：'axis' 和 'item'。折线图、柱状图一般用 'axis'，鼠标在坐标轴附近移动时触发。饼图、散点图用 'item'，鼠标悬停在具体数据点上才触发。
我个人习惯在 formatter 里加一些自定义样式。比如给数值加单位、加颜色标记、甚至加小图标。大屏上用户一眼扫过去，就能抓住关键信息。
params[0].value，但没考虑到 series 里可能有多个数据维度。结果鼠标移上去，显示的值是错的。后来我改用 params[0].data，再根据索引取具体字段，才搞定。
4.6 legend：图例的学问
图例（legend）的作用是标识不同系列的颜色和名称。默认情况下，ECharts 会自动生成图例，但位置和样式往往需要手动调整。
legend: {
data: ['销售额', '利润'],
top: '5%',
left: 'center',
textStyle: {
color: '#fff',
fontSize: 14
}
}
在大屏上，图例的摆放位置很讲究。我一般放在顶部居中，或者右上角。如果系列太多，可以考虑用 type: 'scroll' 让图例可滚动。
还有一个隐藏功能：点击图例可以隐藏/显示对应的系列。这在数据对比时特别有用。比如你想只看「销售额」的走势，点一下「利润」的图例，它就消失了。这个交互是 ECharts 自带的，不需要额外写代码。
legend.selectedMode: false。我一般在演示模式下会关掉这个功能，防止别人不小心点没了。
4.7 总结一下
好了，咱们把 ECharts 的六大核心概念捋了一遍。说白了，option 是总纲，series 是灵魂，xAxis/yAxis 是骨架，grid 是画布，tooltip 是嘴巴，legend 是名牌。
你想想看，一个图表无非就是：数据（series）放在坐标轴（xAxis/yAxis）上，画在某个区域（grid）里，鼠标移上去显示详情（tooltip），旁边有个图例（legend）告诉你谁是谁。是不是一下子就清晰了？
下一章咱们会深入讲 series 的各种类型，包括折线图、柱状图、饼图、散点图、雷达图等。到时候我会结合大屏的实际案例，告诉你每种图表的选型思路和定制技巧。
嗯，今天就到这儿。记得动手试试，光看是学不会的。