Skip to content
概述
ECharts 折线图的 click 事件默认只在拐点（Symbol）上触发，两个拐点之间的连线本身不会直接响应点击。如果交互需求是“点击线上任意位置查看该时间点数据”，就需要绕过这一限制。切入点位于 ECharts 底层依赖的 ZRender，线段在 ZRender 中是有独立图形元素的，可以直接监听。
事件原理
ECharts 的事件系统构建在 ZRender 之上。chart.on('click', …) 只在 ECharts 层注册，它只对“具有独立图形元素且 ECharts 为其暴露事件”的组件响应。折线图的拐点（Symbol）是独立的 ZRender 图形元素，而两拐点之间的连线是类型为 ec-polyline 的图形元素——ECharts 没有为它暴露事件。
ZRender 本身会对所有图形元素触发事件。直接从 ZRender 实例上监听，可以拿到线段的点击：
js
const chart = echarts.init(dom);
const zr = chart.getZr();
zr.on('click', (e) => {
// e.target 就是 ZRender 中的图形元素
if (e.target && e.target.__ec_inner_1 !== undefined) {
const seriesIndex = e.target.__ec_inner_1;
// seriesIndex 对应 option.series 中的下标
}
});基本用法
获取 ZRender 实例后，通过判断 e.target.type 过滤出线段点击，再借助内部属性获取所属系列：
js
chart.getZr().on('click', (e) => {
const target = e.target;
if (!target || target.type !== 'ec-polyline') return;
const seriesIndex = target.__ec_inner_1;
if (typeof seriesIndex !== 'number') return;
// 此后可以结合坐标反查数据点
});convertFromPixel 是 ECharts 的公开 API，用于将像素坐标转换为图表坐标系中的数值。结合 ZRender 事件中的 offsetX / offsetY，可以得到点击位置对应的数据坐标，进而查找最近的数据点。
示例
下面的例子展示完整的线段点击处理流程：过滤图形类型 → 获取系列下标 → 坐标转换 → 查找最近数据点。
js
const chart = echarts.init(document.getElementById('main'));
chart.setOption({
xAxis: { data: ['A', 'B', 'C', 'D'] },
yAxis: {},
series: [{
type: 'line',
data: [10, 20, 15, 25]
}]
});
chart.getZr().on('click', (e) => {
const target = e.target;
if (!target || target.type !== 'ec-polyline') return;
const seriesIndex = target.__ec_inner_1;
if (typeof seriesIndex !== 'number') return;
const pointInPixel = [e.offsetX, e.offsetY];
const pointInGrid = chart.convertFromPixel({ seriesIndex }, pointInPixel);
// pointInGrid 是形如 [xAxisValue, yAxisValue] 的数组
console.log('点击位置对应的坐标:', pointInGrid);
const data = chart.getOption().series[seriesIndex].data;
// 根据 pointInGrid 在 data 中查找最近的数据点（此处省略具体查找逻辑）
});pointInGrid 的第一个元素是 x 轴上的值（对于类目轴为类目字符串，对于数值轴为数值），第二个元素是 y 轴值。如果 x 轴为类目轴，convertFromPixel 返回的 x 值就是类目字符串，可直接用于定位数据。
区域填充扩展
对于设置了 areaStyle 的折线图，填充区域对应的 ZRender 类型是 ec-polygon，同样可以获取 seriesIndex：
js
zr.on('click', (e) => {
if (e.target?.type === 'ec-polygon') {
const seriesIndex = e.target.__ec_inner_1;
// 处理逻辑与线段一致
}
});填充区域的点击范围明显大于线段，在移动端会更容易点中。
注意事项
内部属性的版本兼容
__ec_inner_1 是 ECharts 的内部属性，双下划线前缀表明它不是公开 API。不同版本中：
ec-polyline可能被拆分为多个子图形元素；- 属性命名可能变动（
__ec_inner_0、__ec_inner_2等同样存在）； - 所携带的数据结构也可能调整。
实践中至少需要做三件事：
- 锁定 ECharts 版本号，避免使用
^范围； - 在 CI 中增加版本升级时的 snapshot 测试，验证内部属性未变化；
- 代码中加防御性检查：
if (e.target?.type === 'ec-polyline' && typeof e.target.__ec_inner_1 === 'number')。
已知限制：特定宽度下点击失效
在主题切换时，某些具体的容器宽度下点击事件会消失，换一个宽度值又恢复。推测是 ZRender 在 resize 时对 ec-polyline 的命中检测与 CSS 尺寸之间存在 1px 级的舍入误差，导致特定宽度下线条元素的命中测试落入不可点击状态。临时规避方式：设置 series.lineStyle.width >= 1，或在主题切换后手动调用 chart.resize()。
回退到公开 API 的对比方案
如果对稳定性要求高于交互增强，可以放弃 ZRender 层监听，回到 ECharts 公开的 Symbol 点击事件。缺点是只能点拐点，优点是完全基于公开 API：
js
chart.on('click', (params) => {
// params 中包含 seriesIndex、dataIndex、value 等信息
if (params.componentType === 'series') {
console.log('点击的数据点:', params.value);
console.log('坐标:', params.dataIndex);
}
});对比：
- 线段点击方案：可点击线上任意位置，但依赖内部属性，版本升级有风险。
- Symbol 点击方案：仅拐点可点，但完全使用公开 API，无需关心版本细节。
选择时可以根据交互重要性和维护成本权衡。如果线段点击仅作为增强体验，不是核心依赖，使用公开 API 方案更稳妥。