O uso de Echarts da tecnologia de visualização de dados

Echarts é uma biblioteca de visualização de código aberto baseada em JavaScript, que fornece vários gráficos e componentes interativos, suporta vários tipos de gráficos, como gráficos de linha, histogramas, gráficos de pizza, gráficos de dispersão, mapas, etc., e também suporta atualizações dinâmicas de dados, zoom e arrastar e outras operações interativas. Este blog técnico apresentará o uso básico de ECharts.

1. Preparações
   Primeiro, precisamos importar o arquivo JS do ECharts, que pode ser importado através do CDN ou baixando arquivos locais. Supondo que usamos o método CDN, podemos adicionar o seguinte código ao cabeçalho do arquivo HTML:

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

   Depois disso, adicionamos um contêiner div no HTML para hospedar o gráfico ECharts. Por exemplo:

   <div id="main" style="height:500px;"></div>

2. Crie um gráfico de linha básico
   Preparamos o ambiente ECharts, agora podemos começar a criar gráficos. Abaixo está um exemplo de código para um gráfico de linhas simples.

   var dom = document.getElementById("main");
   var myChart = echarts.init(dom);
   
   var option = {
     xAxis: {
       type: "category",
       data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
     },
     yAxis: {
       type: "value",
     },
     series: [
       {
         data: [820, 932, 901, 934, 1290, 1330, 1320],
         type: "line",
       },
     ],
   };
   
   if (option && typeof option === "object") {
     myChart.setOption(option);
   }

   No código, primeiro obtemos o contêiner principal na página, inicializamos uma instância de ECharts por meio do método echarts.init() e o vinculamos ao contêiner principal. Em seguida, definimos um objeto de opção, que contém as informações de configuração do gráfico ECharts, onde xAxis e yAxis representam o tipo e os dados do eixo horizontal e do eixo vertical respectivamente, e series é um array que contém o tipo e os dados do gráfico. Ao final, definimos o objeto opção para a instância ECharts através do método myChart.setOption().

3. Belo estilo de tema
   Através do tema opcional fornecido pelo ECharts, podemos facilmente embelezar o estilo do gráfico. Por exemplo, podemos usar o tema "light" com o seguinte código:

   var dom = document.getElementById("main");
   var myChart = echarts.init(dom, "light");

4. Gráficos adaptativos
   Ao exibir gráficos em diferentes dispositivos, podemos precisar fazer ajustes adaptativos. ECharts suporta a adaptação do tamanho do gráfico definindo o tamanho do contêiner, o método específico é o seguinte:

   myChart.resize();

5. Atualização dinâmica de dados
   ECharts suporta atualização dinâmica de dados, você pode atualizar os dados através dos dados no método setOption, por exemplo:

   var newData = [9527, 9333, 9867, 9188, 10300, 12788, 9999];
   myChart.setOption({
     series: [
       {
         data: newData,
       },
     ],
   });

   Claro, também podemos usar os efeitos de animação fornecidos pelo ECharts para tornar a atualização de dados mais vívida.

   Através das etapas acima, podemos começar a usar o ECharts para criar vários tipos de gráficos. ECharts fornece tipos de gráficos ricos e funções interativas, tornando a visualização de dados mais fácil de usar.