Perguntas[echarts](coding)

Estou trabalhando em um gráfico de Gantt. Ele se parece com isso:

Aqui está o código:

// Create a new Map
const modeColors = new Map();

// Adding entries to the map
modeColors.set(0, 'brown');
modeColors.set(1, 'lightgrey');
modeColors.set(2, '#ffa500');
modeColors.set(3, '#663300');

// Create a new Map
const statusColors = new Map();

// Adding entries to the map
statusColors.set(0, '#32cd32');
statusColors.set(1, 'lightblue');
statusColors.set(2, 'yellow');

const delayColors = new Map();
delayColors.set(0, '#32cd32');
delayColors.set(1, 'darkred');
delayColors.set(2, '#3399ff');
delayColors.set(3, 'crimson');

function getColor(categoryIndex, stateIndex) {
  switch (categoryIndex) {
    case 0:
      return modeColors.get(stateIndex);
    case 1:
      return statusColors.get(stateIndex);
    case 2:
      return delayColors.get(stateIndex);
    default:
      return '#777777';
  }
}

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    left: '180em',
    right: '40em',
    height: '30%',
    top: '55%'
  },
  xAxis: {
    name: 'Time',
    type: 'time',
    id: 'time',
    position: 'bottom',
    min: '2025-04-14 06:00:00',
    max: '2025-04-14 22:00:00',
    nameLocation: 'middle',
    nameGap: 25
  },
  yAxis: {
    type: 'category',
    data: ['Mode', 'Status', 'Delay'],
    name: 'ganttCategoryAxis',
    axisTick: { show: false },
    splitLine: { show: true },
    inverse: true,
    nameTextStyle: { fontSize: 0 }
  },
  series: [
    {
      type: 'custom',
      encode: {
        x: [0, 1],
        y: 2
      },
      data: [
        // startTime, endTime, category, state
        ['2025-04-14 06:00:00', '2025-04-14 10:00:00', 0, 0],
        ['2025-04-14 10:00:00', '2025-04-14 14:00:00', 0, 1],
        ['2025-04-14 14:00:00', '2025-04-14 15:15:00', 0, 2],
        ['2025-04-14 15:15:00', '2025-04-14 18:00:00', 0, 3],
        ['2025-04-14 18:00:00', '2025-04-14 23:00:00', 0, 0],
        ['2025-04-14 06:00:00', '2025-04-14 10:00:00', 1, 1],
        ['2025-04-14 10:00:00', '2025-04-14 22:00:00', 1, 2],
        ['2025-04-14 22:00:00', '2025-04-14 23:00:00', 1, 0],
        ['2025-04-14 12:00:00', '2025-04-14 12:40:00', 2, 1]
      ],
      renderItem: renderGanttItem
    }
  ]
};

function renderGanttItem(params, api) {
  var categoryIndex = api.value(2);
  var stateIndex = api.value(3);
  var timeArrival = api.coord([api.value(0), categoryIndex]);
  var timeDeparture = api.coord([api.value(1), categoryIndex]);
  var barLength = timeDeparture[0] - timeArrival[0];
  var barHeight = 30;
  var x = timeArrival[0];
  var y = timeArrival[1] - barHeight / 2;
  var color = getColor(categoryIndex, stateIndex);

  return {
    type: 'rect',
    shape: {
      x: x,
      y: y,
      width: barLength,
      height: barHeight
    },
    style: {
      fill: color,
      opacity: 0.66,
      stroke: 'black'
    }
  };
}

Possui 3 categorias: Modo, Status e Atraso. No momento, a dica de ferramenta exibe uma lista de todos os elementos da categoria específica. Quero criar uma dica de ferramenta com vários estados de categorias que mostre o estado atual de todas as categorias (modo, status, atraso) em um horário específico. Por exemplo, quando eu passar o mouse em 12:20, ela deverá exibir:

Mode - 1
Status - 2
Delay - 1

Porque esses 3 elementos de dados (um de cada categoria) estavam ativos às 12:20:

data: [
        // startTime, endTime, category, state
        ['2025-04-14 06:00:00', '2025-04-14 10:00:00', 0, 0]
        ['2025-04-14 10:00:00', '2025-04-14 14:00:00', 0, 1] //FIRST ONE
        ['2025-04-14 14:00:00', '2025-04-14 15:15:00', 0, 2]
        ['2025-04-14 15:15:00', '2025-04-14 18:00:00', 0, 3]
        ['2025-04-14 18:00:00', '2025-04-14 23:00:00', 0, 0]
        ['2025-04-14 06:00:00', '2025-04-14 10:00:00', 1, 1]
        ['2025-04-14 10:00:00', '2025-04-14 22:00:00', 1, 2] // SECOND
        ['2025-04-14 22:00:00', '2025-04-14 23:00:00', 1, 0]
        ['2025-04-14 12:00:00', '2025-04-14 12:40:00', 2, 1] // THIRD
      ]

Tentei adicionar um formatador personalizado:

formatter: function (params) {
    /* Iterating over all elements and displaying the element when the mouse-hover time is within the element's start and end time */
    }

O problema é que quando itero sobre todos os parâmetros, consigo ver apenas os elementos que já estão dentro da categoria para onde o mouse está apontando no momento.

É possível configurar a tooltipopção para aceitar múltiplos valueFormatterpara cada série? Digamos que eu tenha uma série contendo dados de temperatura e outra série contendo frequência cardíaca. Gostaria de formatá-los com unidades diferentes (°C e Bpm, respectivamente) e número de decimais.

Estou ciente de que posso usar a formatteropção para realizar essa tarefa, mas isso elimina o estilo de dica de ferramenta padrão que eu gostaria de manter. Alguém sabe de uma maneira?

Gostaria de adicionar um recurso de anotações ao meu diagrama echarts. Ele será marcado como uma linha pontilhada verde com um marcador quadrado verde se houver alguma anotação. Quando o usuário clicar no marcador quadrado verde, um pop-up será aberto para mostrar a anotação real.

Quando executo o comando abaixo, ele é acionado sempre que clico em qualquer lugar na linha do marcador de anotação. Como posso saber se o usuário clica especificamente no marcador quadrado verde?

myChart.on('click', "series.line", function(params) {
  console.log('normal click series.markLine', params)
})

Aqui está a demonstração: https://codepen.io/lora999/pen/azbGPKY

Tenho este gráfico com intervalos de 7 para divisões e rótulos. O eixo X inferior está correto ao começar em 0 e mostrar intervalos em cada 7 valores. Para o eixo superior, quero fazer o mesmo, mas para alinhar com os pontos da série, basicamente 1 valor para a esquerda. Não consigo descobrir como deslocá-lo.

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?

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}

Estou aprendendo a usar eCharts e testando diferentes tipos. Cortei e colei dois tipos de barras de eChart, um com drill down (id = main2) e um horizontal com valores negativos (id = main1); dispostos em uma única linha de tabela.

Ambos renderizam corretamente, e o drill down funciona bem; o botão voltar funciona como esperado e exibe o gráfico de barras inicial adequado; exceto que ele permanece visível no nível superior do gráfico após voltar. Atualizar a página o remove.

<head>
    <meta charset='utf-8' />


    
  </head>

<body>
  <table class="container-drilldown" >
    <thead>
        
    </thead>
    <tbody>
        <tr>  
          <td class='drilldown' class ='center' id='main2' style='width: 30vw; height:45vh' >
            <script type='text/javascript'>
    
              var chartDom = document.getElementById('main2');
              var myChart = echarts.init(chartDom);
              var option = {
                xAxis: {
                  data: ['Animals', 'Fruits', 'Cars']
                },
                yAxis: {},
                dataGroupId: '',
                animationDurationUpdate: 500,
                series: {
                  type: 'bar',
                  id: 'sales',
                  data: [
                    {
                      value: 5,
                      groupId: 'animals'
                    },
                    {
                      value: 2,
                      groupId: 'fruits'
                    },
                    {
                      value: 4,
                      groupId: 'cars'
                    }
                  ],
                  universalTransition: {
                    enabled: true,
                    divideShape: 'clone'
                  }
                }
              };
              const drilldownData = [
                {
                  dataGroupId: 'animals',
                  data: [
                    ['Cats', 4],
                    ['Dogs', 2],
                    ['Cows', 1],
                    ['Sheep', 2],
                    ['Pigs', 1]
                  ]
                },
                {
                  dataGroupId: 'fruits',
                  data: [
                    ['Apples', 4],
                    ['Oranges', 2]
                  ]
                },
                {
                  dataGroupId: 'cars',
                  data: [
                    ['Toyota', 4],
                    ['Opel', 2],
                    ['Volkswagen', 2]
                  ]
                }
              ];
              myChart.on('click', function (event) {
                if (event.data) {
                  var subData = drilldownData.find(function (data) {
                    return data.dataGroupId === event.data.groupId;
                  });
                  if (!subData) {
                    return;
                  }
                  myChart.setOption({
                    xAxis: {
                      data: subData.data.map(function (item) {
                        return item[0];
                      })
                    },
                    series: {
                      type: 'bar',
                      id: 'sales',
                      dataGroupId: subData.dataGroupId,
                      data: subData.data.map(function (item) {
                        return item[1];
                      }),
                      universalTransition: {
                        enabled: true,
                        divideShape: 'clone'
                      }
                    },
                    graphic: [
                      {
                        type: 'text',
                        left: 50,
                        top: 20,
                        style: {
                          text: 'Back',
                          fontSize: 18
                        },
                        onclick: function () {
                          myChart.setOption(option);
                        }
                      }
                    ]
                  });
                }
              });
              
              option && myChart.setOption(option);
              
            
          </script>
        </td>
         

        <td class='drilldown' class ='center' id='main1' style='width: 30vw; height:45vh' >
          <script type='text/javascript'>
            var chartDom1 = document.getElementById('main1');
            var myChart1 = echarts.init(chartDom1);

            var option1 = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              legend: {
                data: ['Profit', 'Expenses', 'Income']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: [
                {
                  type: 'value'
                }
              ],
              yAxis: [
                {
                  type: 'category',
                  axisTick: {
                    show: false
                  },
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                }
              ],
              series: [
                {
                  name: 'Profit',
                  type: 'bar',
                  label: {
                    show: true,
                    position: 'inside'
                  },
                  emphasis: {
                    focus: 'series'
                  },
                  data: [200, 170, 240, 244, 200, 220, 210]
                },
                {
                  name: 'Income',
                  type: 'bar',
                  stack: 'Total',
                  label: {
                    show: true
                  },
                  emphasis: {
                    focus: 'series'
                  },
                  data: [320, 302, 341, 374, 390, 450, 420]
                },
                {
                  name: 'Expenses',
                  type: 'bar',
                  stack: 'Total',
                  label: {
                    show: true,
                    position: 'left'
                  },
                  emphasis: {
                    focus: 'series'
                  },
                  data: [-120, -132, -101, -134, -190, -230, -210]
                }
              ]
            };

            option && myChart1.setOption(option1);
          </script>
      </td>

  </tr>

Existe uma maneira de criar uma borda ao redor no Apache eChart? Eu olhei nos documentos, tentei várias combinações, mas não consigo colocar uma borda ao redor de um gráfico.

Eu os tenho em uma tabela e posso adicionar bordas dessa forma, mas poder adicioná-los ao gráfico e não à tabela seria legal.

Aqui está um gráfico com o qual estou tendo problemas.

Exemplo de Echart

O problema é que se você alterar qualquer um dos valores de dados, os rótulos desaparecem no gráfico de funil. Meu objetivo é manter os rótulos no lado direito da tela, mesmo se eu alterar os valores de dados.

atualizar dinamicamente qualquer um dos valores sem recarregar o gráfico.

data: [
        { value: 60, name: 'Visit' },
        { value: 40, name: 'Inquiry' },
        { value: 20, name: 'Order' },
        { value: 80, name: 'Click' },
        { value: 100, name: 'Show' }
      ]

Preciso ter o rótulo no lado direito da tela e a única maneira que sei de fazer isso é com a opção labelLayout. O problema é que, quando essa opção é incluída, o problema ocorre.

Tentei consultar a documentação e outras questões com echarts, mas não obtive sucesso.

Estou trabalhando em um projeto angular 17, mas você pode ver o problema no exemplo acima usando o site echarts.

Eu gostaria de criar um gráfico como este no ECharts:

Então, alguém tem alguma idéia? Tentei usar um exemplo da página ECharts, mas não parece ser minha IU. Fiz uma fileira de pontos, mas não consigo esticar o círculo em um retângulo com raio, lembre-se dos 2 meios círculos azuis acima e abaixo

https://echarts.apache.org/examples/en/editor.html?c=pie-parliament-transition

Nos echarts do Apache, quero criar layouts mais avançados, semelhantes a matplotlib gridspeclinhas e colunas, abrangendo plotly. Isso é factível? Por exemplo é possível fazer esse layout em echarts?