ECharts柱状图中同类别内两个维度间markLine的绘制及动态坐标配置问题

我想用ECharts绘制一个带标记线的柱状图，展示不同死亡原因（类别）下各年龄组（维度）的数据，效果如下：

目前每个维度都是series数组中type: "bar"的对象，现在遇到两个问题：

• 如何让markLine的起止点从数据集中动态获取，而不是在配置里硬编码坐标？
• 如何让markLine在同一个类别的两个不同维度之间绘制？

我已经用硬编码的x/y值实现了目标效果，但这种方式在图表缩放时会完全失效。试过用coord配置，但它无法区分“Kreislaufsystem”类别下的不同维度，只会画出一条竖线，达不到预期。

针对问题1：从数据集动态获取markLine坐标 #

硬编码坐标失效的核心原因是没有和图表的实时渲染坐标绑定，解决思路是利用ECharts提供的动态坐标获取机制，比如回调函数或数据集维度映射：

方案1：通过回调函数实时获取渲染后的坐标

这种方式会在图表初始化、缩放、更新时自动重新计算坐标，完全适配图表变化。示例代码如下：

markLine: {
  data: [
    // 起点：指定系列+数据项的坐标
    {
      coord: function() {
        // 获取当前图表实例
        const chart = this.getChart();
        // 拿到第一个维度（比如年龄组1）的系列模型
        const targetSeries = chart.getModel().getSeriesByIndex(0);
        // 获取对应类别（比如Kreislaufsystem）的数据项布局信息（索引需根据你的数据调整）
        const dataLayout = targetSeries.getData().getItemLayout(2);
        // 返回[x, y]坐标
        return [dataLayout.x, dataLayout.y];
      }
    },
    // 终点：同类别下的第二个维度（年龄组2）的坐标
    {
      coord: function() {
        const chart = this.getChart();
        const targetSeries = chart.getModel().getSeriesByIndex(1);
        const dataLayout = targetSeries.getData().getItemLayout(2);
        return [dataLayout.x, dataLayout.y];
      }
    }
  ]
}

方案2：基于Dataset维度映射

如果你的图表使用了dataset组件管理数据，可以直接通过维度名称匹配坐标，无需手动计算索引：

markLine: {
  data: [
    {
      // 起点：匹配类别为Kreislaufsystem的年龄组1数据
      categoryValue: 'Kreislaufsystem',
      valueDim: ['年龄组1']
    },
    {
      // 终点：同类别下的年龄组2数据
      categoryValue: 'Kreislaufsystem',
      valueDim: ['年龄组2']
    }
  ]
}

这种方式要求你的dataset列配置清晰，ECharts会自动关联对应的数据点坐标。

针对问题2：在同类别两个维度间绘制markLine #

核心是准确定位同类别下不同维度（series）的对应数据点：

1. 每个维度对应独立的bar系列，同一个类别在所有系列中的dataIndex是一致的（比如Kreislaufsystem在每个series里都是第2个数据项）
2. 利用上述动态坐标方案，分别获取同类别下两个不同series的dataIndex对应的坐标，即可画出连接两个维度的线条

另外可以优化线条样式，让连接更直观：

markLine: {
  lineStyle: {
    type: 'solid',
    color: '#ff4d4f',
    width: 2
  },
  // 上述的data配置...
}

备注：内容来源于stack exchange，提问作者michele