Componente de Gráfico para ser usado com o Zeedhi Next, construído sobre o Apache ECharts, usando o componente vue-echarts.
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
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);
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.
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)"
}
}
}
]
}
}
]
}
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
|
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}}"
}
}