双轴标签场景与需求分析
场景与目标
在一个图表中，两组数据源往往具有不同量纲，例如温度与销量。此时使用双坐标轴（左轴与右轴）可以在同一个图上对比趋势，帮助分析者同时观察两组数值的变化关系。双轴标签的呈现成为提升可读性的关键点之一。
为了提升可读性，需要确保两组数据的数据标签/标签文字在图上清晰显示，避免读者产生混淆。实现的要点在于为不同序列绑定不同的 yAxisIndex，并为每个序列开启数据标签，从而实现两组数据的标签信息同时可见。
核心实现思路与关键参数
绑定双坐标轴与数据标签
在 ECharts 中，通过 yAxisIndex 将系列绑定到左轴 (0) 或右轴 (1)。同时，在每个 series 配置中开启 label，将 show 设置为 true。这是实现“双轴标签同时显示”的直接方式，确保两组数据的数值标签在对应轴端及时呈现。
为了实现更清晰的对比，可以对左轴和右轴分别设置 axisLabel 的格式化器，给数值添加单位（如 °C、件），以避免读者在单位上产生误解。通过这种方式，双轴标签不仅在视觉上并列，还能在单位信息层面保持一致性。
完整可运行示例：实现要点与代码结构
前提条件与依赖
示例基于 ECharts 官方库实现，推荐通过 CDN 引入。使用 5.x 及以上版本能够获得稳定的双轴支持与标签功能。
在页面中准备一个容器元素（如 div）来承载图表，并确保容器具有明确的宽高以便图表正确渲染。
逐步实现要点
第一步，初始化图表实例，获取容器引用并调用 echarts.init。第二步，配置 xAxis、yAxis 与 series，并为两条序列指定 yAxisIndex，以实现双轴映射。第三步，开启 dataLabel，使两组数据的数值标签在图表中可见。第四步，设置 grid、tooltip 与轴标签格式化，以提升交互体验与可读性。
通过以上步骤，可以实现“两条轴上的标签同时显示，并且标签信息与轴单位保持一致，帮助读者快速解读数据对比关系。
ECharts 双轴标签同时显示示例
说明与要点回顾
上述代码中的关键点包括：
1) 两条 y 轴分别绑定序列，通过 yAxisIndex 将温度数据绑定左轴，销量数据绑定右轴，从而实现双轴结构。
2) 两条序列均开启了 dataLabel，通过 label.show 与 position 设置，使两组数值标签在各自的轴端清晰可见。
3) axisLabel.formatter 分别为左右坐标轴添加单位信息，提升数值解读的准确性。
常见问题与性能优化要点
如何避免标签重叠与遮挡
在双轴场景中，左右轴的标签以及数据标签可能会互相遮挡，导致可读性下降。此时可以通过完善 grid 与 containLabel 配置来腾出足够的显示区域，并在需要时调整标签的 position 或使用 formatter 进行简化显示。
另外可以对不同序列应用不同的字体大小或颜色，使标签在视觉层级上分离，增强对比效果。
兼容性与交互优化
为提升用户体验，可以开启 tooltip 的轴向触发，配合 axisPointer 的类型与样式，使跨轴对比更直观。建议在实际页面中进行不同分辨率的适配测试，确保双轴标签在各种设备上都能清晰呈现。
