php mysql 柱状图,使用EChat通过php连接mysql数据库从而实现将数据转换为柱状图

今天博主在完成自己的鼎食城毕业设计时，想到传统的管理系统只是将数据读取出来，如果可以实现数据可视化，将数据通过柱状图的方式表现出来的话，相必可以为自己的毕业设计增添几分亮点，于是博主便开始寻找有没有相关的插件可以实现，最终实现了这个程序，博主使用的是EChat，php的运行软件是phpstudy,数据库是MySQL。

下面是程序实现后的截图：

下面是实现代码：其采用的是利用php将查询的数据转换为json格式，然后通过调用相关插件来显示：

首先是数据库配置文件：

$mysql_server_name='localhost'; //改成自己的mysql数据库服务器

$mysql_username='root'; //改成自己的mysql数据库用户名

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

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

?>

接下来是数据库查询文件：

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;

?>

然后便是数据可视化界面：

ECharts

鼎食城用户消费详情

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

// }

这便是今天的一个小收获，在这里分享给大家，码字不易，给个赞呗！

彭祥.

发布了59 篇原创文章 · 获赞 146 · 访问量 6万+

私信

关注

标签：name,type,柱状图,result,mysql,var,php,data

来源： https://blog.csdn.net/pengxiang1998/article/details/103945489