@zeedhi/zd-echarts-common

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