echart+php 动态获取数据(饼图)_php mysql echarts 饼图-优快云博客

本文链接：https://blog.youkuaiyun.com/OnePiece_only/article/details/79413914

本文介绍了如何使用ECharts与PHP结合，动态获取数据并生成饼图。关键在于通过PHP获取数据后，利用ECharts的setOption方法更新图表。注意HTML、JS和PHP代码的正确配置，特别是数据传递和图表渲染的部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echart 动态获生成图形的核心是需要把请求到的数据重新设定setOption添加进去
如果你的显示不出来图形注意我的注释部分有提示
html代码

<html>
  <head>
      <meta charset="utf-8" />
      <title>bingtu.html</title>
      <script src="https://cdn.bootcss.com/echarts/4.0.2/echarts-en.js"></script>
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  </head>
  <body>
    <div id="main" style="border:1px solid red;height:300px;" ></div>
  </body>
</html>
<script>

js代码

<script>
function reSetOption()
{
  $.post('你要访问数据的地址',function(info){
      //查看info是否为json对象 如果是不用JSON.parse 
      //如果是json字符串需要转成json对象
      info = JSON.parse(info);
      console.log(info);
      chart.setOption({
          series:[{
            data:info,
          }],
      })
  });
}
var chart = echarts.init(document.getElementById('main'));
option = {
    tooltip:{},
    title:{
      text:'饼图',
    },
    series : [{
      name: '销售统计',
      type: 'pie',
      radius: '55%',
      data:[],
  }]
};
chart.setOption(option);
reSetOption();
</script>

php代码

<?php
/*如果你是想传动态的数据 ， 如果你的数组键不是name value就显示不出来图形 所以你得把你的数据中要显示的内容键改为name、value*/
/*你可以用循环 把你需要的值取出来赋给一个键为name value的新数组*/
$data = [['value'=>335, 'name'=>2],['value'=>400, 'name'=>8]];
return json_encode($data);
?>