php与MySQL与ajax与echart综合

Posted 樱花落舞

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了php与MySQL与ajax与echart综合相关的知识，希望对你有一定的参考价值。

http://www.yinghualuowu.com/php/echart.html

创建table sex 有name num            

<?php
    ini_set(\'display_errors\',1);            //错误信息  
    ini_set(\'display_startup_errors\',1);    //php启动错误信息  
    error_reporting(-1); 
    ini_set(\'error_log\', dirname(__FILE__) . \'/error3_log.txt\');//打印出所有的 错误信息  
    require("config.php");
      $conn=mysqli_connect($mysql_server_name,$mysql_username,$mysql_password) or die("error connecting");
      mysqli_query($conn,\'set names utf8\'); 
      mysqli_select_db($conn,$mysql_database); 
      $result = mysqli_query($conn,"select * from sex");
      $data="";
      $array= array();
      class User{
        public $name;
        public $num;
      }
     while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
        // printf ("%s : %s",$row["name"],$row["num"]);
         $user=new User();
         $user->name=$row[\'name\'];
         $user->num=$row[\'num\'];
         $array[]=$user;
     }
    $data=json_encode($array);
    echo $data;
?>

这样，我们就创建了一个json文件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="../js/echarts.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
<div id="main" style="height:400px"></div>
<script type="text/javascript">
              var  myChart = echarts.init(document.getElementById(\'main\'));
              var arr1=[],arr2=[];
              function arrTest(){
                $.ajax({
                  
                  type:"post",
                  url:"echart.php",
                  dataType:"json",
                  async:false,
                  data:{},
                  success:function(result){
                    
                    if (result){
                      for (var i = 0; i < result.length; i++) {
                          arr1.push(result[i].name);
                          arr2.push(result[i].num);
                      }
                    }
                  },
                error:function(errorMsg) {
                    alert("数据读取失败");
                }    
                  })
                return arr1,arr2;
              }
              arrTest();
                console.log(arr1[0]);
              var  option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                       data:[\'num\']
                    },
                    xAxis : [
                        {
                            type : \'category\',
                            data : arr1
                        }
                    ],
                    yAxis : [
                        {
                            type : \'value\'
                        }
                    ],
                    series : [
                        {
                            "name":"num",
                            "type":"bar",
                            "data":arr2
                        }
                    ]
                };

                myChart.setOption(option);
   
    </script>
</body>
</html>

 

以上是关于php与MySQL与ajax与echart综合的主要内容，如果未能解决你的问题，请参考以下文章

ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化

雷林鹏分享：PHP - AJAX 与 MySQL

JFreeChart与AJAX+JSON+ECharts两种处理方式生成热词统计可视化图表

创建用户聊天系统 -（PHP、MySQL、AJAX？）

echarts地图中城市与省份之间的切换

700多个PHP版本随时切换，PHPWAMP共生模式与多档位综合教程。