echarts+php+mysql 绘图实例

最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表。
我使用的是echart3,相比较第二版,echarts3体积上减少了200k,适配了移动端,且不再按照需求引入不同的包,直接用echarts.init方法初始化就ok。更简洁更强大,国产良心产品。 5分钟上手echarts3

第一步:搭建环境


我使用XAMPP软件包作为开发平台,这个可以直接百度下载,一直next安装好。开启Apache和MySql。
在mysql中创建一个数据库,我使用了Navicat for mysql来进行数据库管理。下载及使用方法参考 :百度经验
这是我建好的测试表:

第二步:php链接数据库并处理数据


可以把这个php文件保存为db_config.php,以后再进行数据库链接就直接require("db_config.php")就ok。
接下来,创建另一个php文件,处理数据:

name = $row['name'];
    $user->age = $row['age'];
    $array[]=$user;
  }
  $data=json_encode($array);
  // echo "{".'"user"'.":".$data."}";
  echo $data;
?>

这两个php文件都要放在..\xampp\htdecs下,在浏览器打开:http://localhost/test1.php
可以看到已经处理好的json数组:

[{"name":"\u767d\u96e8\u83f2","age":"40"},{"name":"\u5f20\u5929\u5f3a","age":"42"},{"name":"\u51af\u5176\u5eb8","age":"21"},{"name":"\u9a6c\u6b65\u5ddd","age":"18"},{"name":"\u6d2a\u521a","age":"100"},{"name":"\u5218\u4e09\u96cd","age":"21"},{"name":"\u9f50\u4e00\u9e23","age":"85"},{"name":"\u738b\u660e","age":"21"}]

name的值是php将中文转成unicode编码,前端调用的时候会自动转成中文。

第三步:前端通过ajax调用数据并绘图

怎么调用echarts我就不赘述了,可以直接去echart官网学习查看,基本没什么学习成本,写几个demo就会爱上她的。



    
    ECharts
    
    


    
    

  我觉得里面最重要的就是对json数组的循环,将同属性的值创建成新的数组,然后return给对应坐标轴的data,具体的可以参考我的上一篇博客。


-------------------------------------------------------------------
同事大哥指出上述代码中ajax请求了两次,如果数据量大一点就容易数据冗余。遂进行改进。将ajax请求放在option外,在一次请求中就返回两个需要的数组,然后在option时候直接用就ok。


  本文转载自https://www.cnblogs.com/qjqcs/p/5852958.html,如有侵权,请联系删除,谢谢

最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表。
我使用的是echart3,相比较第二版,echarts3体积上减少了200k,适配了移动端,且不再按照需求引入不同的包,直接用echarts.init方法初始化就ok。更简洁更强大,国产良心产品。 5分钟上手echarts3

第一步:搭建环境


我使用XAMPP软件包作为开发平台,这个可以直接百度下载,一直next安装好。开启Apache和MySql。
在mysql中创建一个数据库,我使用了Navicat for mysql来进行数据库管理。下载及使用方法参考 :百度经验
这是我建好的测试表:

第二步:php链接数据库并处理数据


    $mysql_server_name='localhost'; //改成自己的mysql数据库服务器

    $mysql_username='root'; //改成自己的mysql数据库用户名

    $mysql_password=''; //改成自己的mysql数据库密码,初始默认密码为空

    $mysql_database='study'; //改成自己的mysql数据库名
 ?>


可以把这个php文件保存为db_config.php,以后再进行数据库链接就直接require("db_config.php")就ok。
接下来,创建另一个php文件,处理数据:


  require("db_config.php");
  $conn=mysql_connect($mysql_server_name,$mysql_username,$mysql_password) or die("error connecting") ;
  mysql_query("set names 'utf8'"); //数据库输出编码
  mysql_select_db($mysql_database); //打开数据库
  $result = mysql_query("select * from study");
  $data="";
  $array= array();
  class User{
    public $name;
    public $age;
  }
  while($row = mysql_fetch_array($result,MYSQL_ASSOC)){
    $user=new User();
    $user->name = $row['name'];
    $user->age = $row['age'];
    $array[]=$user;
  }
  $data=json_encode($array);
  // echo "{".'"user"'.":".$data."}";
  echo $data;
?>


这两个php文件都要放在..\xampp\htdecs下,在浏览器打开:http://localhost/test1.php
可以看到已经处理好的json数组:

[{"name":"\u767d\u96e8\u83f2","age":"40"},{"name":"\u5f20\u5929\u5f3a","age":"42"},{"name":"\u51af\u5176\u5eb8","age":"21"},{"name":"\u9a6c\u6b65\u5ddd","age":"18"},{"name":"\u6d2a\u521a","age":"100"},{"name":"\u5218\u4e09\u96cd","age":"21"},{"name":"\u9f50\u4e00\u9e23","age":"85"},{"name":"\u738b\u660e","age":"21"}]


name的值是php将中文转成unicode编码,前端调用的时候会自动转成中文。

第三步:前端通过ajax调用数据并绘图

怎么调用echarts我就不赘述了,可以直接去echart官网学习查看,基本没什么学习成本,写几个demo就会爱上她的。


<head>
    <meta charset="utf-8">
    <title>EChartstitle>
    <script src="js/echarts.min.js">script>
    <script src="js/jquery.js">script>
head>
<body>
    
    <div id="main" style="height:400px">div>
    <script type="text/javascript">
              var  myChart = echarts.init(document.getElementById('main'));
              var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                       data:['age']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : (function(){
                                    var arr=[];
                                        $.ajax({
                                        type : "post",
                                        async : false, //同步执行
                                        url : "test1.php",
                                        data : {},
                                        dataType : "json", //返回数据形式为json
                                        success : function(result) {
                                        if (result) {
                                              console.log(result);
                                               for(var i=0;iconsole.log(result[i].name);
                                                  arr.push(result[i].name);
                                                }
                                        }

                                    },
                                    error : function(errorMsg) {
                                        alert("sorry,请求数据失败");
                                        myChart.hideLoading();
                                    }
                                   })
                                   return arr;
                                })()
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"age",
                            "type":"bar",
                            "data":(function(){
                                        var arr=[];
                                        $.ajax({
                                        type : "post",
                                        async : false, //同步执行
                                        url : "test1.php",
                                        data : {},
                                        dataType : "json", //返回数据形式为json
                                        success : function(result) {
                                        if (result) {
                                               for(var i=0;iconsole.log(result[i].age);
                                                  arr.push(result[i].age);
                                                }
                                        }
                                    },
                                    error : function(errorMsg) {
                                        alert("sorry,请求数据失败");
                                        myChart.hideLoading();
                                    }
                                   })
                                  return arr;
                            })()

                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);
            // }
    script>
body>


我觉得里面最重要的就是对json数组的循环,将同属性的值创建成新的数组,然后return给对应坐标轴的data,具体的可以参考我的上一篇博客。

-------------------------------------------------------------------
同事大哥指出上述代码中ajax请求了两次,如果数据量大一点就容易数据冗余。遂进行改进。将ajax请求放在option外,在一次请求中就返回两个需要的数组,然后在option时候直接用就ok。

<script type="text/javascript">
              var  myChart = echarts.init(document.getElementById('main'));
              var arr1=[],arr2=[];
              function arrTest(){
                $.ajax({
                  type:"post",
                  async:false,
                  url:"test1.php",
                  data:{},
                  dataType:"json",
                  success:function(result){
                    if (result) {
                      for (var i = 0; i < result.length; i++) {
                          arr1.push(result[i].name);
                          arr2.push(result[i].age);
                      }
                    }
                  }
                })
                return arr1,arr2;
              }
              arrTest();
              var  option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                       data:['age']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : arr1
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"age",
                            "type":"bar",
                            "data":arr2
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);
            // }
    script>

你可能感兴趣的:(echarts+php+mysql 绘图实例)