将 MarkLine 设置为位于右侧索引边界而不是单元格中间

Question

我有一个热图，其中某些 x 值具有垂直标记线。现在，垂直线出现在我指定的 x 轴索引的中间。这会将热图单元切成两半，并且会让寻找某些项目之间边界的用户感到困惑。是否可以使用内置选项使垂直线出现在指定的 x 轴索引的右侧边界上？

这是我的 eChart 选项 JavaScript 的相关部分：

series: [
                {
                    type: 'heatmap',
                    data: mutation_map_data,
                    color: colorPalette,                    
                    markLine: {
                        silent: true,
                        data: position_boundaries,
                        lineStyle: {
                            width: 5,
                            color: "white",
                        }
                    },
                    ...
]

变量position_boundaries是以下形式的项目数组：

{"symbol": "none", "xAxis": index, "name": current_position}

Answer 1

将坐标系项目放置在两个轴刻度的中间还是直接放置在其上，由属性 boundaryGap 在轴级别上处理。为了实现这两个目标（在热图项目的中间和标记线的刻度上），您可以使用 2 个单独的轴。带有

boundaryGap: false

的 markLines 的轴需要在末尾包含一项附加项以与主轴对齐。

示例：

const xData = [1, 2, 3, 4, 5, 6];
const yData = [1, 2, 3, 4, 5];
const data = [[1, 0, 1], [5, 0, 1], [0, 1, 1], [3, 1, 1], [4, 2, 1], [5, 2, 1], [1, 3, 1], [2, 4, 1], [3, 4, 1]];

option = {
  xAxis: [
    {
      type: 'category',
      data: xData,
      splitArea: {
        show: true
      }
    },
    {
      type: 'category',
      data: xData.concat(['last']),
      show: false,
      boundaryGap: false
    }
  ],
  yAxis: {
    type: 'category',
    data: yData,
    splitArea: {
      show: true
    }
  },
  series: [
    {
      type: 'heatmap',
      data: data,
    },
    {
      type: 'custom',
      xAxisIndex: 1,
      markLine: {
        silent: true,
        data: [{ xAxis: '2' }],
        lineStyle: {
          width: 5,
          color: 'red'
        }
      }
    }
  ]
};