Início / coding / 问题

Perguntas[echarts](coding)

Martin Hope
Steven Magana-Zook
Asked: 2025-01-07 07:44:26 +0800 CST
  • 4

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
Martin Hope
Jlv
Asked: 2024-11-25 00:19:50 +0800 CST
  • 6

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>
echarts
Martin Hope
Jlv
Asked: 2024-11-13 00:21:01 +0800 CST
  • 5

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.

echarts
Martin Hope
Josh Garrison
Asked: 2024-09-27 05:10:20 +0800 CST
  • 6

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.

echarts
Martin Hope
Hp Lam
Asked: 2024-08-05 12:54:45 +0800 CST
  • 5

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

insira a descrição da imagem aqui

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

echarts
Martin Hope
Strike
Asked: 2023-08-17 22:09:23 +0800 CST
  • 5

Estou tentando criar duas markLines com minhas médias (anual e nas últimas 13 semanas), a primeira markline será minha média anual com uma pequena posição de dica de ferramenta por volta de janeiro. Meu segundo será minhas médias das últimas 13 semanas com uma pequena posição por volta de julho. A captura de tela abaixo é o que eu tenho.

insira a descrição da imagem aqui

Aqui está uma captura de tela da pequena dica de ferramenta. Tem que ser uma linha de marcação também.

insira a descrição da imagem aqui

Aqui estão minhas opções. MarkLine não aparece.

     xAxis: [
        {
          type: "category",
          data: Object.keys(resultObject),
          show: false,
        },
        {
          position: "bottom",
          type: "category",
          data: categories.map((category) => category.charAt(0)),
          xAxisIndex: 2,
          show: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      yAxis: {
        show: false,
        type: "value",
      },
      series: [
        {
          data: Object.values(resultObject),
          type: "bar",
          itemStyle: {
            color: (seriesIndex) =>
              seriesIndex.dataIndex > 39 ? "#FF5630" : "#A19D9A",
          },
          markLine: {
            data: {
              name: "Horizontal line with Y value at 100",
              yAxis: 100,
            },
          },
        },
      ],
echarts