最近在学习php+mysql，因为之前画图表都是直接在echart的实例demo中修改数据，便想着两相结合练习一下，通过ajax调用后台数据画图表。
我使用的是echart3，相比较第二版，echarts3体积上减少了200k，适配了移动端，且不再按照需求引入不同的包，直接用echarts.init方法初始化就ok。更简洁更强大，国产良心产品。
第一步：搭建环境
我使用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下，在浏览器打开： 可以看到已经处理好的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。