echarts+php+mysql绘图实例
最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习⼀下,通过ajax调⽤后台数据画图表。我使⽤的是echart3,相⽐较第⼆版,echarts3体积上减少了200k,适配了移动端,且不再按照需求引⼊不同的包,直接⽤echarts.init⽅法初始化就ok。更简洁更强⼤,国产良⼼产品。 *[5分钟上⼿echarts3]
(echarts.baidu/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts)* ![] (obxzpdt76.bkt.clouddn/%E4%B8%8B%E8%BD%BD.png) ##第⼀步:搭建环境我使⽤XAMPP软件包作为开发平台,这个可以直接百度下载,⼀直next安装好。开启Apache和MySql。在mysql中创建⼀个数据库,我使⽤了Navicat for mysql来进⾏数据库管理。下载及使⽤⽅法参考:*[百度经验]
(jingyan.baidu/article/6181c3e074ba0d152ff15346.html)* 这是我建好的测试表: ![]
php修改数据库内容(obxzpdt76.bkt.clouddn/Image%201.jpg) ##第⼆步:php链接数据库并处理数据 ```php $mysql_username='root'; //改成⾃⼰的mysql数据库⽤户名 $mysql_password=''; //改成⾃⼰的mysql数据库密码,初始默认密码为空
$mysql_database='study'; //改成⾃⼰的mysql数据库名
>
<span >
可以把这个php⽂件保存为db_config.php,以后再进⾏数据库链接就直接require("db_config.php")就ok。
接下来,创建另⼀个php⽂件,处理数据:
```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;
>
这两个php⽂件都要放在..\xampp\htdecs下,在浏览器打开:localhost/test1.php 可以看到已经处理好的json数组:
```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就会爱上她的。 ```html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论