TransWikia.com

receber json para tornar o meu Echart dinamico

Stack Overflow em Português Asked by JoãoEs on January 2, 2022

Aqui esta imagem do grafico

 var echartLine = echarts.init(document.getElementById('echart_line'), theme);

  echartLine.setOption({
    title: {
      text: 'Line ',
      subtext: 'Mes'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      x: 220,
      y: 40,
      data: ['actions1', 'actions2', 'actions3']
    },
    toolbox: {
      show: true,
      feature: {
        magicType: {
          show: true,
          title: {
            line: 'Line',
            bar: 'Bar',
            stack: 'Stack',
            tiled: 'Tiled'
          },
          type: ['line', 'bar', 'stack', 'tiled']
        },
        restore: {
          show: true,
          title: "Restore"
        },
        saveAsImage: {
          show: true,
          title: "Save Image"
        }
      }
    },
    calculable: true,
    xAxis: [{
      type: 'category',
      boundaryGap: false,
     // scale:true,
     // splitNumber:12,

      data: ['Mon', Tue', 'Wed', 'Thu', 'Fri'] //Quero receber aqui em JSON
    }],
    yAxis: [{
      type: 'value'
    }],
    series: [{
      name: 'stuff',
      type: 'line',
      smooth: true,
      itemStyle: {
        normal: {
          areaStyle: {
            type: 'default'
          }
        }
      },
      data: [10, 12, 21, 54, 260, 830, 710] // Quero receber aqui em JSON
    }, {
      name: 'stuff',
      type: 'line',
      smooth: true,
      itemStyle: {
        normal: {
          areaStyle: {
            type: 'default'
          }
        }
      },
      data: [30, 182, 434, 791, 390, 30, 10]
    }, {
      name: 'things',
      type: 'line',
      smooth: true,
      itemStyle: {
        normal: {
          areaStyle: {
            type: 'default'
          }
        }
      },
      data: [1320, 1132, 601, 234, 120, 90, 20]
    }]
  });

Como posso receber ali no “data” o meu array com as querys vindas do PHP para tornar o meu gráfico dinamico? Estou a necessitar urgentemente de ajuda. Até hoje utilizei pouco o JSON. Obrigado

2 Answers

Dá uma olhada nesse link: https://codepen.io/andr-menezes/pen/EdLJMe, utilizei esse Pen pra implementar o Echarts com Json no meu projeto. No meu caso eu gero um arquivo json e leio o mesmo exibindo os dados no gráfico.

Answered by Andre Menezes on January 2, 2022

Tudo depende de como você está disponibilizando essa informação no PHP.

Um jeito simples seria adicionar uma chamda a jQuery.get() que busque essas informações.

var echartLine = echarts.init(document.getElementById('echart_line'), theme),
    chartData;

// Faz a chamada ao servidor para buscar os dados do PHP
$.get('/caminho/da/url.php', {dataType: 'json'}, function(retorno) {
    chartData = retorno;
});
...
data: chartData

e no PHP você processa os dados e retorna com:

$dados = array(); // aqui um array com os dados que você precisa
header('Content-Type: application/json');
echo json_encode($dados);
exit();

Answered by Ricardo Moraleida on January 2, 2022

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP