Apache ECharts如何左移markline并适配X轴分类？

要让MarkLine精准适配X轴的分类类目，直接使用coord属性可能因category轴的坐标映射规则未生效，推荐以下两种可靠方式：

方法1：利用类目索引的边界值定位 #

category轴的每个类目对应一个从0开始的索引，每个类目的宽度为1个单位，左边界为索引-0.5，右边界为索引+0.5。直接通过xAxis指定边界值，结合目标Y值即可实现精准覆盖：

option = {
  xAxis: {
    type: 'category',
    data: ['类目1', '类目2', '类目3']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar',
    data: [10, 30, 50],
    markLine: {
      data: [
        // 覆盖"类目1"的横向目标线，Y值20
        [
          { xAxis: -0.5, yAxis: 20 },
          { xAxis: 0.5, yAxis: 20 }
        ],
        // 覆盖"类目2"的横向目标线，Y值40
        [
          { xAxis: 0.5, yAxis: 40 },
          { xAxis: 1.5, yAxis: 40 }
        ]
      ]
    }
  }]
};

方法2：通过类目名称+动态偏移（适配响应式） #

如果需要用类目名称而非索引定位，可结合offset属性，动态计算类目宽度的一半实现左右偏移，适配容器尺寸变化的场景：

// 初始化图表
var chart = echarts.init(document.getElementById('main'));
var option = {
  xAxis: {
    type: 'category',
    data: ['类目1', '类目2', '类目3']
  },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [10, 30, 50],
    markLine: {
      data: [
        [
          { xAxis: '类目1', yAxis: 20 },
          { xAxis: '类目1', yAxis: 20 }
        ]
      ]
    }
  }]
};
chart.setOption(option);

// 动态获取类目宽度并设置偏移
var xAxisLayout = chart._chartsViews[0]._axisProxy.getAxisLayout();
var categoryWidth = xAxisLayout.getBandWidth();
chart.setOption({
  series: [{
    markLine: {
      data: [
        [
          { xAxis: '类目1', yAxis: 20, offset: -categoryWidth/2 },
          { xAxis: '类目1', yAxis: 20, offset: categoryWidth/2 }
        ]
      ]
    }
  }]
});

关键说明 #

• 优先选择方法1，无需额外计算，直接基于category轴的索引规则定位，适配所有静态场景；
• 避免直接使用coord属性，因为category轴的坐标映射由ECharts内部处理，coord更适合数值型轴的像素/数据值定位。

内容的提问来源于stack exchange，提问作者Dorr