Apache ECharts 中 K 线图极值标记与 Y 轴标签重叠问题解决方案

问题背景

在使用 Apache ECharts 绘制 K 线图时，开发者经常需要标记出最高价和最低价数据点。当这些极值点恰好位于 Y 轴边缘时，自定义的标记图形可能会与 Y 轴标签发生重叠，影响图表可读性。

问题重现

通过设置 markPoint 配置项，我们可以为 K 线图添加极值标记。典型配置如下：

markPoint: {
  data: [
    {
      name: 'highest value',
      type: 'max',
      symbol: 'path://M0 0l1 0l0 0.00001z',
      symbolSize: 30,
      symbolOffset: ['-50%', 0],
      itemStyle: {
        borderColor: '#777777'
      },
      label: {
        color: '#777777',
        position: 'left'
      }
    },
    // 类似配置最低点标记
  ]
}

当用户平移 K 线图时，如果极值点移动到 Y 轴边缘区域，标记图形会覆盖 Y 轴标签，造成视觉干扰。

解决方案

方案一：动态调整标记位置

最优解决方案是通过监听 datazoom 事件，动态检测极值点位置并调整标记偏移量：

myChart.on('datazoom', function(params) {
  const option = myChart.getOption();
  // 检测极值点是否靠近Y轴边缘
  const isNearEdge = checkIfPointsNearYAxis(option);
  
  // 动态更新markPoint配置
  option.series[0].markPoint.data.forEach(item => {
    item.symbolOffset = isNearEdge ? ['50%', 0] : ['-50%', 0];
    item.label.position = isNearEdge ? 'right' : 'left';
  });
  
  myChart.setOption(option);
});

function checkIfPointsNearYAxis(option) {
  // 实现检测逻辑，判断极值点是否靠近Y轴
  // 返回true/false
}

这种方法既保持了默认的标记样式，又在必要时自动调整位置避免重叠。

方案二：固定偏移量

对于简单场景，可以直接设置固定的偏移量：

symbolOffset: ['50%', 0],
label: {
  position: 'right'
}

这种方法实现简单，但会改变所有情况下标记的位置，可能不符合某些设计需求。

实现细节

1. 位置检测算法：需要计算极值点在当前视图中的相对位置，判断其是否处于 Y 轴附近区域（如前5%的宽度范围）

2. 平滑过渡：在调整标记位置时，可以添加动画效果使变化更加自然

3. 响应式设计：需要考虑不同屏幕尺寸下的适配问题

最佳实践建议

1. 优先采用动态调整方案，保持视觉一致性
2. 为标记图形设置适当的透明度，减少遮挡影响
3. 考虑添加 tooltip 增强交互体验
4. 在移动端应用中，适当增大标记与轴标签的间距

通过以上方法，开发者可以优雅地解决 K 线图中极值标记与轴标签重叠的问题，提升数据可视化的专业性和可读性。