ECharts 简介
交互事件与数据缩放
掌握 ECharts 的事件监听、tooltip 格式化、dataZoom 缩放和 markPoint/markLine 标注。
🎯 引言
好看的图表还要“好用”。学会这篇文章，你能给图表加上点击事件、自定义提示框内容、区域缩放和平均线标注，让用户和图表真正互动起来。
🧱 事件监听 on
ECharts 实例通过 on 方法监听交互事件，以常用的 click 事件为例：
chart.on('click', (params) => {
console.log(params.name); // 类目名，如 '周一'
console.log(params.value); // 数值，如 120
console.log(params.seriesName); // 系列名，如 '销量'
});
params 里常用的字段：
| 字段 | 含义 |
|---|---|
name | 点击位置对应的类目名 |
value | 数值 |
seriesName | 所属系列名 |
dataIndex | 数据在数组中的下标 |
实际场景举例：点击某根柱子，跳转到对应日期的详情页：
chart.on('click', (params) => {
router.push(`/detail?day=${params.name}`);
});
✨ 自定义提示框 formatter
tooltip 默认显示“系列名：数值”，想换成自己的话术用 formatter：
tooltip: {
trigger: 'axis',
formatter: (params) => {
const item = params[0];
return `${item.name} 销量：${item.value} 件`;
},
},
trigger: 'axis' 时 formatter 收到的 params 是数组（该刻度下所有系列），trigger: 'item' 时是单个对象。搞混类型是 formatter 失效的常见原因。🧱 区域缩放 dataZoom
数据点多的时候（比如一整年每天的销量），一屏塞不下，dataZoom 可以让用户拖动、滚轮缩放查看局部：
dataZoom: [
{
type: 'slider', // 底部滑块
},
{
type: 'inside', // 图表内滚轮、拖拽
},
],
'slider'：图表下方出现一个可拖动的滑块条。'inside'：鼠标滚轮或触屏手势直接在图表上缩放。
两种可以同时存在，互不冲突。
🧱 标注 markPoint 与 markLine
想让图表自己“说话”，比如标出最大值、画一条平均线，不用手算，ECharts 内置了标注能力：
series: [
{
name: '销量',
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' },
],
},
markLine: {
data: [{ type: 'average', name: '平均值' }],
},
},
],
markPoint：在图上标点，内置'max'、'min'。markLine：在图上画线，内置'average'，常用于平均线。
标注的价值在于“自动”。数据更新后最大值、平均线会跟着重算，不需要你手动维护位置。
真实渲染效果：最大值、最小值自动标点，平均线自动计算：
🧾 小节总结
chart.on('click', fn)监听交互，params含 name、value、seriesName 等字段。tooltip.formatter自定义提示框，注意 axis 触发时参数是数组。dataZoom实现区域缩放，'slider'滑块、'inside'滚轮，可叠加使用。markPoint标最大、最小值，markLine画平均线，数据变化自动更新。
❓ 知识问答
Q1：事件回调里的 this 指向什么？
建议统一用箭头函数，避免 this 指向问题。箭头函数里可以正常访问组件作用域的变量。
Q2：formatter 里能写 HTML 吗？
可以，返回的字符串支持简单 HTML 标签和行内样式，比如 <b>、<br/>，方便排版。
Q3：dataZoom 放在 option 的哪一层？
和 series、xAxis 平级，是顶层数组，默认作用于第一条 x 轴。
Q4：markLine 只能画平均值吗？
不是，还支持最大、最小值线，也可以写具体数值 { yAxis: 100 } 画固定线。平均线和最大值线比较常用。
🧪 小练习
给“一周销量”折线图加上交互三件套：
- 点击某个数据点时，用
alert弹出“周X 的销量是 XX”。 - 加一条平均值
markLine。 - 加一个
'slider'类型的dataZoom。
const chart = echarts.init(chartRef.value);
chart.setOption({
// 请在这里编写代码（配置部分）
});
// 请在这里编写代码（事件部分）
🎉 恭喜你的图表已经能看又能互动了！下一篇解决真实项目的老大难：数据从接口来、还会不停变化，图表该怎么更新。