ZdECharts

Componente de Gráfico para ser usado com o Zeedhi Next, construído sobre o Apache ECharts, usando o componente vue-echarts.

Instalação

O ZdECharts é composto pelos pacotes @zeedhi/zd-echarts-common e @zeedhi/zd-echarts-vue. Utilize o comando abaixo para instalar ambos automaticamente:

npm install @zeedhi/zd-echarts

Ou instale os pacotes separadamente:

npm install @zeedhi/zd-echarts-vue @zeedhi/zd-echarts-common

Registro do Componente

Para registrá-lo, adicione o seguinte código ao inicializar a aplicação (por exemplo no arquivo zeedhi.ts)

import Vue from 'vue';
import { ZdECharts } from '@zeedhi/zd-echarts'; 
// import { ZdECharts } from '@zeedhi/zd-echarts-vue'; caso tenha instalado os pacotes separadamente

Vue.component('ZdECharts', ZdECharts);

Registro dos Gráficos e Componentes do Apache ECharts

⚠️IMPORTANTE! Para garantir que o tamanho da aplicação gerada usando esse componente não fique muito grande, é necessário registrar os tipos de gráficos e componentes disponibilizados pelo Apache ECharts que se deseja utilizar. Dessa forma no bundle gerado somente serão adicionados os códigos dos gráficos que serão realmente utilizados. Para adicionar os gráficos e componentes use o código abaixo:

import Vue from 'vue';
import {
  ZdECharts,
  echartsCore,
  echartsCharts,
  echartsComponents,
} from '@zeedhi/zd-echarts';

Vue.component('ZdECharts', ZdECharts);
echartsCore.use([
  echartsCharts.PieChart,
  echartsCharts.BarChart,
  echartsComponents.GridComponent,
]);

Veja aqui toda a lista de charts, components, renderers e features que podem ser utilizados.

Uso Básico

Para utilizá-lo em um Metadata, basta definir a propriedade component como "ZdECharts". Use a propriedade options para definir as propriedades do gráfico de acordo com a documentação do Apache ECharts:

{
  "name": "card-chart",
  "component": "ZdCard",
  "height": "600px",
  "children": [
    {
      "name": "pie-chart",
      "component": "ZdECharts",
      "options": {
        "title": {
          "text": "Referer of a Website",
          "subtext": "Fake Data",
          "left": "center"
        },
        "tooltip": {
          "trigger": "item"
        },
        "legend": {
          "left": "center",
          "top": "bottom"
        },
        "series": [
          {
            "name": "Access From",
            "type": "pie",
            "radius": "50%",
            "data": [
              { "value": 1048, "name": "Search Engine" },
              { "value": 735, "name": "Direct" },
              { "value": 580, "name": "Email" },
              { "value": 484, "name": "Union Ads" },
              { "value": 300, "name": "Video Ads" }
            ],
            "emphasis": {
              "itemStyle": {
                "shadowBlur": 10,
                "shadowOffsetX": 0,
                "shadowColor": "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    }
  ]
}

Propriedades

| Nome | Tipo | Padrão | Descrição | |---------------|--------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------|-----------------------------------------------------------------------| | options | object | | Objeto de configuração gráfico. Veja todas as possibilidades de uso desse parâmetro na documentação do Apache ECharts. | | initOptions | object | | Configurações iniciais opcionais do gráfico. Veja o parâmetro opts aqui. | | theme | string or object | | Tema a ser aplicado. Veja o parâmetro theme aqui. | | autoResize | Boolean | true | Define que o gráfico irá redimensionar automaticamente. | | group | string | | Usado para coneção de interação de vários gráficos, conforme definido na documentação do Apache ECharts. | | height | string or number | '100%' | Altura do gráfico. Valores possíveis poderiam ser: '100%', '400px' or 400 | | width | string or number | '100%' | Largura do gráfico. Valores possíveis poderiam ser: '100%', '400px' or 400 | | loading | boolean | false | Coloca o gráfico em modo de 'carregamento' para mostrar um overlay e uma animação. | | loadingOpacity | number | 0.5 | Opacidade do componente de overlay | | loadColor | string | 'primary' | Cor usada pela animação de 'carregamento' | | events | object | {} | Eventos do componente. Além dos eventos definidos abaixo, podem ser usados todos os eventos padrões definidos no ZdComponent |

Eventos

Além dos eventos de lifecycle definidos no ZdComponent (onCreated, onBeforeMount, onMounted, onBeforeDestroy e onDestroyed), o componente ZdECharts implementa todos os eventos definidos pela API do Apache ECharts. Para diferenciar os eventos padrões do Zeedhi Next dos eventos definidos pelo Apache ECharts, todos os eventos do segundo foram renomeados para começar com chart, ou seja, o evento datazoom virou chartDatazoom, o evento legendselectchanged virou chartLegendselectchanged, etc.

{
  "name": "pie-chart",
  "component": "ZdECharts",
  "options": { ... },
  "events": {
    "chartDatazoom": "{{Controller.chartDatazoomEvent}}",
    "chartClick": "{{Controller.chartClickEvent}}"
  }
}