今天博主在完成自己的鼎食城毕业设计时，想到传统的管理系统只是将数据读取出来，如果可以实现数据可视化，将数据通过柱状图的方式表现出来的话，相必可以为自己的毕业设计增添几分亮点，于是博主便开始寻找有没有相关的插件可以实现，最终实现了这个程序，博主使用的是EChat，php的运行软件是phpstudy,数据库是MySQL。
下面是程序实现后的截图：
下面是实现代码：其采用的是利用php将查询的数据转换为json格式，然后通过调用相关插件来显示：
首先是数据库配置文件：
<?php
$mysql_server_name='localhost'; //改成自己的mysql数据库服务器
$mysql_username='root'; //改成自己的mysql数据库用户名
$mysql_password='px980305'; //改成自己的mysql数据库密码,初始默认密码为空
$mysql_database='dsc'; //改成自己的mysql数据库名
?>
接下来是数据库查询文件：
<?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 user");
$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['account'];
$array[]=$user;
}
$data=json_encode($array);
// echo "{".'"user"'.":".$data."}";
echo $data;
?>
然后便是数据可视化界面：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="echarts.min.js"></script>
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<table ><tr><th width=1200>鼎食城用户消费详情</th></tr>
<tr><th><div id="main" style="height:400px"></div></th></tr></table>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var arr1=[],arr2=[];
function arrTest(){
$.ajax({
type:"post",
async:false,
url:"test1.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);
}
}
}
})
return arr1,arr2;
}
arrTest();
var option = {
tooltip: {
show: true
},
legend: {
data:['age']
},
xAxis : [
{
type : 'category',
data : arr1
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"消费金额",
"type":"bar",
"data":arr2
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
// }
</script>
</body>
这便是今天的一个小收获，在这里分享给大家，码字不易，给个赞呗！
