Início / coding / Perguntas / 79334593
Accepted
Steven Magana-Zook
Asked: 2025-01-07 07:44:26 +0800 CST

Defina MarkLine para ficar no limite do índice à direita em vez de no meio da célula

  • 772

Tenho um mapa de calor com markLines verticais para certos valores x. No momento, a linha vertical está aparecendo no meio do índice do eixo x que eu especifico. Isso corta a célula do mapa de calor pela metade e é confuso para usuários que procuram o limite entre certos itens. É possível usar opções integradas para que essa linha vertical apareça no limite direito do índice do eixo x especificado?

Mapa de calor com linhas de marcação para cada categoria x valor

Aqui está a parte relevante do meu JavaScript de opção do eChart:

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

Onde a variável position_boundaries é uma matriz de itens do formato:

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

1 respostas

  1. Best Answer

    Se você deseja colocar os itens do seu sistema de coordenadas no meio de dois ticks de eixo ou diretamente nele, isso é feito no nível do eixo pela propriedade boundaryGap . Para conseguir ambos (no meio para itens de mapa de calor e no tick para marklines), você pode usar 2 eixos e séries separados. O eixo para markLines com boundaryGap: falseprecisa conter um item adicional no final para alinhar com o eixo principal.

    Exemplo :

    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'
        }
      }
    }
  ]
};
    • 2

relate perguntas