@zeedhi/zd-echarts-common v1.4.1

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

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}}"
  }
}