Início / coding / Perguntas / 79220563
Accepted
Jlv
Asked: 2024-11-25 00:19:50 +0800 CST

exibe o botão Voltar no nível superior após a análise detalhada

  • 772

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

1 respostas

  1. Best Answer

    O comportamento padrão de echarts#setOption é mesclar a opção existente com a nova; essa é a razão pela qual a graphicda segunda opção é mantida após a chamada myChart.setOption(option). Se você quiser que a opção original substitua completamente a segunda opção, você tem que desabilitar a mesclagem de opções:

    myChart.setOption(option, {notMerge: true});

    Aqui está um trecho com seu código sem o segundo gráfico não relacionado e sem as classes CSS ausentes:

    const chartDom = document.getElementById('main2');
const myChart = echarts.init(chartDom);
const 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, {notMerge: true});
               }
            }
         ]
      });
   }
});

myChart.setOption(option);
    <table class="" >
   <thead>
   </thead>
   <tbody>
   <tr>
      <td class='' id='main2' style='/*width: 30vw; height:45vh;*/ width: 500px; height: 250px' >
      </td>
   </tr>
   </tbody>
</table>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>

    • 1

relate perguntas