receber json para tornar o meu Echart dinamico

Question

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

Andre Menezes · Answer

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

Ricardo Moraleida · Answer

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();

receber json para tornar o meu Echart dinamico

2 Answers

Add your own answers!

Ask a Question