如何在ECharts中限制水平线至指定X轴刻度点

要实现水平线终止于指定X轴点（'2017-10-18'），不能依赖yAxis的全局配置（这类配置会贯穿整个X轴范围），推荐用以下两种方法：

方法一：使用Series的markLine配置（推荐） #

直接在数据系列中添加markLine，明确指定线条的起始和结束坐标点，ECharts会自动处理坐标转换：

option = {
  xAxis: {
    type: 'category',
    data: ['2017-10-16', '2017-10-17', '2017-10-18', '2017-10-19', '2017-10-20']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [10, 20, 30, 40, 50],
      type: 'line',
      // 添加markLine配置
      markLine: {
        lineStyle: {
          color: '#ccc', // 自定义线条颜色
          width: 1
        },
        data: [
          // 起始点：X轴起始值 + 目标Y值
          { coord: ['2017-10-16', 50] },
          // 结束点：指定的X轴日期 + 相同Y值
          { coord: ['2017-10-18', 50] }
        ]
      }
    }
  ]
};

如果需要线条从X轴最左端开始，起始点的X值可以直接用X轴数据数组的第一个元素，或者通过min获取X轴最小值。

方法二：使用Graphic组件绘制线条 #

如果需要更灵活的自定义，可通过graphic组件直接绘制线条，需要动态计算像素坐标：

option = {
  xAxis: {
    type: 'category',
    data: ['2017-10-16', '2017-10-17', '2017-10-18', '2017-10-19', '2017-10-20']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [10, 20, 30, 40, 50],
      type: 'line'
    }
  ],
  // 添加graphic组件
  graphic: {
    elements: [
      {
        type: 'line',
        shape: {
          // 动态计算起始点像素坐标
          x1: (params) => params.coordSys.convertToPixel({x: '2017-10-16', y: 50})[0],
          y1: (params) => params.coordSys.convertToPixel({x: '2017-10-16', y: 50})[1],
          // 动态计算结束点像素坐标
          x2: (params) => params.coordSys.convertToPixel({x: '2017-10-18', y: 50})[0],
          y2: (params) => params.coordSys.convertToPixel({x: '2017-10-18', y: 50})[1]
        },
        style: {
          stroke: '#ccc',
          lineWidth: 1
        }
      }
    ]
  }
};

注意 #

• 移除原来通过yAxis定义水平线的配置（比如yAxis.splitLine或yAxis.axisLine的相关设置），避免线条重复。
• 两种方法中，markLine更简洁，无需手动计算像素，优先推荐。

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