Class: EChartsVisualizationDef

@nginstack/web-framework/lib/dsv/EChartsVisualizationDef~ EChartsVisualizationDef


new EChartsVisualizationDef()

Classe abstrata que contém as configurações de visualizações de data sources por meio de gráficos da biblioteca ECharts.

Example
// Exemplo de definição de uma visualização em gráfico
{
  type: 'echarts',
  dataSourceQuery: {
    dataSource: -1891504224, // Usuários habilitados.ids
    filters: [
      { name: "xValidity_START" },
      { name: "xValidity_END" }
    ],
    columns: [
      { name: "U_iKey" },
      { name: "U_iStatus.iName" }
    ]
  },
  filters: [
    { name: "xValidity_START", label: "Data inicial", required: true },
    { name: "xValidity_END", label: "Data final", required: true }
  ],
  onGetOptions: function (dsv, ds) {
    const countByStatus = {};
    for (ds.first(); !ds.eof; ds.next()) {
      const status = ds.str('U_iStatus_iName');
      const count = countByStatus[status] || 0;
      countByStatus[status] = count + 1;
    }
    const categories = [];
    const data = [];
    Object.keys(countByStatus).forEach(function (status) {
      categories.push(status);
      data.push(countByStatus[status]);
    });
    return {
      title: {
        text: 'Usuários habilitados por status'
      },
      tooltip : {
        trigger: 'axis',
        axisPointer : {
          type : 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        title: 'Usuários por status',
        type: 'category',
        data: categories,
        axisTick: {
          alignWithLabel: true
        }
      },
      yAxis: {
        type: 'value',
        name: 'Quantidade',
        boundaryGap: ['0%', '5%']
      },
      series: [
        {
          name: 'Usuários',
          type: 'bar',
          data: data
        }
      ]
    };
  }
}

Extends

  • DataVisualizationDef

Members


height :string|number

Altura do gráfico.

Type:
  • string | number

onGetOptions :function

Função executada quando a visualização em gráfico é criada. Recebe a visualização e o DataSet obtido do DataSource, e deve retornar as opções de um gráfico, conforme documentação https://echarts.apache.org/en/option.html.

Type:
  • function

theme :string

Tema do ECharts a ser utilizado no gráfico.

Type:
  • string

type :string

O tipo desta visualização. Deve ser obrigatoriamente preenchido com o valor 'echarts'.

Type:
  • string
Default Value:
  • 'echarts'

width :string|number

Largura do gráfico.

Type:
  • string | number