我使用的是echart3，相比较第二版，echarts3体积上减少了200k，适配了移动端，且不再按照需求引入不同的包，直接用echarts.init方法初始化就ok。更简洁更强大。

第一步：搭建环境

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

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

<?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文件，处理数据：

<?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;
  
 ?>

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

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

然后通过ajax去调用吧，然后把对应的数据，按照 echart 的格式配置好，直接刷新页面，即可显示数据了

我觉得里面最重要的就是对json数组的循环，将同属性的值创建成新的数组，然后return给对应坐标轴的data