Echarts柱状图MarkLine不显示求助：需配置两条平均线

问题说明 #

我需要在ECharts柱状图中添加两条MarkLine：

• 年度平均线：Tooltip定位在1月附近
• 最近13周平均线：Tooltip定位在7月附近，样式为小型提示框
  但当前配置下MarkLine完全不显示，附上配置代码和效果截图。

当前配置代码 #

xAxis: [
  {
    type: "category",
    data: Object.keys(resultObject),
    show: false,
  },
  {
    position: "bottom",
    type: "category",
    data: categories.map((category) => category.charAt(0)),
    xAxisIndex: 2,
    show: true,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
],
yAxis: {
  show: false,
  type: "value",
},
series: [
  {
    data: Object.values(resultObject),
    type: "bar",
    itemStyle: {
      color: (seriesIndex) =>
        seriesIndex.dataIndex > 39 ? "#FF5630" : "#A19D9A",
    },
    markLine: {
      data: {
        name: "Horizontal line with Y value at 100",
        yAxis: 100,
      },
    },
  },
],

效果截图 #

当前效果：

目标Tooltip样式：

问题分析与修复方案 #

核心问题点 #

1. xAxis索引错误：第二个xAxis的xAxisIndex设为2，但xAxis数组只有两个元素（索引0和1），导致该轴配置失效，影响MarkLine渲染逻辑。
2. MarkLine数据格式错误：markLine.data需要是数组（支持多条线），原代码用单个对象不符合规范。
3. y值不在可视范围：如果数据远大于100，yAxis自动计算的范围不会包含100，导致MarkLine被隐藏；同时yAxis设为show:false，调试时无法直观看到范围问题。
4. 未配置Tooltip定位：原代码没有指定MarkLine的x轴位置，无法让Tooltip显示在目标月份附近。

修复后的完整配置 #

xAxis: [
  {
    type: "category",
    data: Object.keys(resultObject),
    show: false,
  },
  {
    position: "bottom",
    type: "category",
    data: categories.map((category) => category.charAt(0)),
    // 修正：第二个x轴的索引为1（数组从0开始计数）
    xAxisIndex: 1,
    show: true,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
],
yAxis: {
  // 调试时可临时开启show:true，确认y轴范围是否包含MarkLine的y值
  // show: true,
  type: "value",
  // 可选：如果需要固定y轴范围，避免MarkLine超出可视区域
  // min: 0,
  // max: 你的数据最大值 + 适当余量
},
series: [
  {
    data: Object.values(resultObject),
    type: "bar",
    itemStyle: {
      color: (seriesIndex) =>
        seriesIndex.dataIndex > 39 ? "#FF5630" : "#A19D9A",
    },
    markLine: {
      // 自定义小型Tooltip样式，匹配目标效果
      tooltip: {
        formatter: '{b}: {c}',
        backgroundColor: '#ffffff',
        borderColor: '#cccccc',
        borderWidth: 1,
        textStyle: {
          color: '#333333',
          fontSize: 12
        }
      },
      // 多条MarkLine用数组包裹
      data: [
        // 年度平均线：定位到1月（假设xAxis[0]的data中1月对应索引0，根据实际数据调整）
        {
          name: '年度平均线',
          // 替换为你计算出的年度平均数值
          yAxis: 你的年度平均值,
          // 指定x轴位置，让Tooltip显示在1月附近
          xAxis: 0
        },
        // 最近13周平均线：定位到7月（假设xAxis[0]的data中7月对应索引6，根据实际数据调整）
        {
          name: '最近13周平均线',
          // 替换为你计算出的最近13周平均数值
          yAxis: 你的13周平均值,
          // 指定x轴位置，让Tooltip显示在7月附近
          xAxis: 6
        }
      ]
    },
  },
],

关键修改说明 #

• 修正xAxis索引：把第二个xAxis的xAxisIndex改为1，确保轴配置生效。
• MarkLine数据改为数组：支持同时添加两条平均线。
• 自定义Tooltip样式：通过markLine.tooltip配置背景色、边框、文字样式，实现小型提示框效果。
• 定位Tooltip到目标月份：通过xAxis属性指定对应月份在x轴数据中的索引，让Tooltip显示在目标位置。
• 使用实际平均值：替换配置中的你的年度平均值和你的13周平均值为实际计算的数值，避免用固定的100导致线不可见。

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