ECharts数据可视化（3）——echarts+php+mysql实现前后端数据可视化

最近在学习数据可视化，用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文件bar.php，处理数据，：

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我已经有过介绍，上手很快，此次主要是数据的获取。

测试完成之后在地址栏输入http://你的IP地址/你的文件名.html，就可以查看了，比如我的就是http://10.24.89.120/bar.html，页面展示结果如下：

image.png

至此前后台数据连接完成了。