当前位置：网络安全 > echarts+php+mysql绘图示例

echarts+php+mysql绘图示例

发布：2023-10-05 07:41

-->

最近在学习php+mysql。因为在绘制图表之前，我直接修改了echart实例demo中的数据，所以就想到了将两者结合起来练习，通过ajax调用后台数据来绘制图表。
我使用的是echart3。与第二个版本相比，echarts3的大小减少了200k。适配移动端，不再根据需要引入不同的套餐。直接用echarts.init方法初始化就可以了。更加简洁有力，国产良心产品。 *【5分钟入门echarts3】(http://www.sychzs.cn/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89 %8B% 20E图表)*
![](http://www.sychzs.cn/%E4%B8%8B%E8%BD%BD.png)
##第一步：搭建环境

我使用XAMPP软件包作为开发平台。这个可以直接百度下载然后安装。启动 Apache 和 MySql。
为了在mysql中创建数据库，我使用Navicat for mysql进行数据库管理。下载及使用参考：*【百度体验】(http://www.sychzs.cn/article/6181c3e074ba0d152ff15346.html)*
这是我搭建的测试表：
![](http://www.sychzs.cn/Image%201.jpg)
##第二步：PHP连接数据库并处理数据
````php
$mysql_username='root'; //修改为自己的mysql数据库用户名


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

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



您可以将此php文件保存为db_config.php，然后直接require(“db_config.php”)来连接数据库。 

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

````php


  require("db_config.php");

  $conn=mysql_connect($mysql_server_name,$mysql_username,$mysql_password) 或 die("连接错误") ;

  mysql_query("设置名称'utf8'"); //数据库输出编码

  mysql_select_db($mysql_database); //打开数据库

  $result = mysql_query("从研究中选择*");

  $data="";

  $array= array();

  用户类{

    公共$名称;

    公共$年龄;

  }

  while($row = mysql_fetch_array($result,MYSQL_ASSOC)){

    $user=新用户();

    $user->name = $row['name'];

    $user->age = $row['age'];

    $array[]=$user;

  }

  $data=json_encode($array);

  // echo "{".'"user"'.":".$data."}";

  回显$数据;

?>

这两个php文件必须放在..\xampp\htdecs下并在浏览器中打开：http://localhost/test1.php
可以看到处理后的json数组：
```json
[{"姓名":"\u767d\u96e8\u83f2","年龄":"40"},{"姓名":"\u5f20\u5929\u5f3a","年龄":"42"},{"姓名" ":"\u51af\u5176\u5eb8","年龄":"21"},{"姓名":"\u9a6c\u6b65\u5ddd","年龄":"18"},{"姓名":"\ u6d2a\u521a","年龄":"100"},{"姓名":"\u5218\u4e09\u96cd","年龄":"21"},{"姓名":"\u9f50\u4e00\u9e23" ,"年龄":"85"},{"姓名":"\u738b\u660e","年龄":"21"}]
``

name的值是PHP将中文转换成unicode编码，前端调用时会自动转换成中文。
##第三步：前端通过ajax调用数据并绘制
如何调用echarts我就不详细说了。您可以直接进入echart官网进行学习查看。基本没有学习成本。写了几个演示后你就会爱上她。
```html

电子图表

} ] }; //加载echarts对象数据 myChart.setOption(选项); // }

```

我觉得最重要的是循环json数组，用相同属性的值创建一个新数组，然后返回对应坐标轴的数据。详细内容可以参考我上一篇博客。
![](http://www.sychzs.cn/test.png)
-------------------------------------------------- ------------------
有同事指出，上面的代码中发出了两次ajax请求。如果数据量较大，很容易出现数据冗余。然后进行了改进。将ajax请求放在选项之外，在一个请求中返回两个需要的数组，然后在使用选项时直接使用。