最近在学习数据可视化，用ecahrts的实例demo修改数据不具有普适性，所以想着通过ajax调用mysql的后台数据画图表，也便于日后维护。
第一步：搭建环境
推荐使用XMAPP软件包作为开发平台，开启Apache和MySql，如果本地已经有课mysql，要注意端口的占用。
xmapp.png
第二步：navicat管理数据库
使用navicat进行数据库管理，它是mysql的直觉化的图形用户界面，非常方便，首先链接管理数据库：
navicat.png
用户名密码根据自己实际情况设置。
然后我们建立一个测试表，比如我新建了一个study库，并且在study库中新建了一个study表。
mysql.png
第三步：PHP连接数据库并且处理数据
第一个php文件连接数据库，我保存为sql_config.php,以后在进行数据库链接就直接require就可以。
<?php
$mysql_server_name='localhost'; //mysql数据库服务器
$mysql_username='root'; //mysql数据库用户名
$mysql_password=''; //mysql数据库密码,初始默认密码为空
$mysql_database='study'; //mysql数据库名
?>
接下来，创建另一个php文件bar.php，处理数据，：
<?php
//这部分的功能是读表数据并且转为json格式，便于js处理。
require("sql_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 study");//打开你的表
$data="";
$array= array();
class User{
public $name;
public $age;
public $kg;//字段添加处1
}
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
$user=new User();
$user->name = $row['name'];
$user->age = $row['age'];
$user->kg = $row['kg'];//字段添加处2
$array[]=$user;
}
$data=json_encode($array);
// echo "{".'"user"'.":".$data."}";
echo $data;
?>
这两个php文件都要放在..\xampp\htdecs下，在浏览器打开：http://localhost/bar.php
可以看到已经处理好的json数组，name的值是php将中文转成unicode编码，前端调用的时候会自动转成中文。
php.png
第四步，利用ajax调用数据并在前端绘图。
echarts我已经有过介绍，上手很快，此次主要是数据的获取。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小组的年龄体重统计</title>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
</head>
<body>
<div style="position: relative; overflow: hidden; width: 1538px; height: 760px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="bar" style="height:400px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('bar'));
var arr1=[],arr2=[],arr3=[];
function arrTest(){
//这个功能块的作用就是读取json数据。
$.ajax({
type:"post",//请求服务器载入数据
async:false,//异步属性
url:"bar.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);
arr3.push(result[i].kg); //这边更新字段，可以只写你需要展示的字段。
}
}
}
})
return arr1,arr2,arr3;
}
arrTest();
var option = {
title : {
text: '小组的年龄体重',
subtext: '随便搞搞'},
//Bootstrap 提示工具（Tooltip）插件,鼠标悬停时候的提示框
tooltip: {
show: true
},
//图例
legend: {
data:['age','kg']
},
//工具箱
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
//x轴
xAxis : [
{
type : 'category',
data : arr1
}],
//y轴
yAxis : [
{type : 'value'}
],
//需要展示的系列，根据需要
series : [
{
"name":"age",
"type":"bar",
"data":arr2,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
"name":"kg",
"type":"bar",
"data":arr3,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
}
]
};
// 为echarts对象加载数据
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
测试完成之后在地址栏输入http://你的IP地址/你的文件名.html，就可以查看了，比如我的就是http://10.24.89.120/bar.html，页面展示结果如下：
image.png
至此前后台数据连接完成了。
