echarts+php+mysql 绘图实例

最近在学习php+mysql，因为之前画图表都是直接在echart的实例demo中修改数据，便想着两相结合练习一下，通过ajax调用后台数据画图表。
我使用的是echart3，相比较第二版，echarts3体积上减少了200k，适配了移动端，且不再按照需求引入不同的包，直接用echarts.init方法初始化就ok。更简洁更强大，国产良心产品。 *[5分钟上手echarts3](http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts)*
![](http://obxzpdt76.bkt.clouddn.com/%E4%B8%8B%E8%BD%BD.png)
##第一步：搭建环境

我使用XAMPP软件包作为开发平台，这个可以直接百度下载，一直next安装好。开启Apache和MySql。
在mysql中创建一个数据库，我使用了Navicat for mysql来进行数据库管理。下载及使用方法参考：*[百度经验](http://jingyan.baidu.com/article/6181c3e074ba0d152ff15346.html)*
这是我建好的测试表：
![](http://obxzpdt76.bkt.clouddn.com/Image%201.jpg)
##第二步：php链接数据库并处理数据
```php
$mysql_username='root'; //改成自己的mysql数据库用户名


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

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

<span style="font-size:18px">

可以把这个php文件保存为db_config.php，以后再进行数据库链接就直接require("db_config.php")就ok。

接下来，创建另一个php文件，处理数据：

```php

<?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数组：
```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就会爱上她的。
```html

ECharts

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

```

我觉得里面最重要的就是对json数组的循环，将同属性的值创建成新的数组，然后return给对应坐标轴的data，具体的可以参考我的上一篇博客。
![](http://obxzpdt76.bkt.clouddn.com/test.png)
-------------------------------------------------------------------
同事大哥指出上述代码中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 绘图实例

至此，对前后端的交互过程有了简单清晰的认识。之前一直觉得是洪水猛兽的数据库操作起来也没有很难。

前几日看到昌喆法师在朋友圈的发文:”做和做好是两个概念，但不做就永远做不好“。便是如此。

最新文章

热门文章