ECharts中用markArea展示日期垂直标记是否合适？有无替代方案？

针对你遇到的 markArea 绑定特定系列、区间不全可见时不显示的问题，推荐以下两种更适配的方案，对应 AmCharts 的 axisRange 功能：

1. 使用 xAxis.axisBand 定义坐标轴区间带 #

直接在 x 轴上配置全局区间带，完全脱离系列绑定，且只要区间有部分在可视范围内就会渲染：

option = {
  xAxis: {
    type: 'category',
    data: [...], // 你的x轴日期数据
    axisBand: {
      show: true,
      data: [
        {
          interval: ['2024-03-25', '2024-03-26'],
          itemStyle: {
            color: 'rgba(255, 233, 0, 0.4)'
          }
        },
        {
          interval: ['2024-04-07', '2024-04-08'],
          itemStyle: {
            color: 'rgba(0, 255, 0, 0.3)'
          }
        }
      ]
    }
  },
  // yAxis、series 等其他配置保持原有设置
};

该方案直接关联坐标轴，属于全局配置，无需依赖任何数据系列，区间部分可见时会自动渲染可视范围内的片段。

2. 使用 graphic 组件绘制独立高亮区块 #

如果需要覆盖整个图表高度（而非仅坐标轴区域）或更灵活的样式控制，可通过 graphic 组件绘制独立矩形：

option = {
  graphic: [
    // 第一个事件区间
    {
      type: 'rect',
      // 可通过 myChart.convertToPixel('xAxis', '2024-03-25') 动态计算像素位置
      left: '20%',
      right: '80%',
      top: 0,
      bottom: 0,
      style: {
        fill: 'rgba(255, 233, 0, 0.4)'
      },
      silent: true // 避免干扰图表交互
    },
    // 第二个事件区间
    {
      type: 'rect',
      left: '50%',
      right: '30%',
      top: 0,
      bottom: 0,
      style: {
        fill: 'rgba(0, 255, 0, 0.3)'
      },
      silent: true
    }
  ],
  // 其他配置保持原有设置
};

若需根据 x 轴数据动态计算位置，可在图表初始化后调用 myChart.convertToPixel 方法获取对应坐标，再更新 graphic 组件的位置参数。

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