您的位置：首页 > 数据库 > MySQL

Echart获取mysql表实现图表展示

2017-06-13 16:08 183 查看

结合Echart丰富的图形库，可以把数据以图表形式展现，先上简单的效果图。

1、从数据库取数据，转为json数据格式

数据表结构为shop( 物品名称 )和num（数量），字符编码gbk_chinese
<?php
header("Content-type=text/json;charset=GBK");

$conn = @mysql_connect("127.0.0.1","root","root") or die("无法连接数据库...");
mysql_query("set names GBK");
mysql_select_db("identity",$conn);

/* $conn 连接数据库，127.0.0.1本地数据库，用户名/密码： root/root,

mysql_query("set names GBK")  	设置字符编码格式，

mysql_select_db("identity",$conn)		指定要连接的数据库名"identity"

*/

$resultset = mysql_query('SELECT shop, num FROM echart ');
$data = array();

class Alteration{
public $shopAlter;
public $numAlter;
}

while($row = mysql_fetch_array($resultset,MYSQL_ASSOC)) {
$alter = new Alteration();
$alter->shopAlter = $row['shop'];
$alter->numAlter = $row['num'];
$data[] = $alter;
}
/*依次存入shop和num列到alyer()*/

echo json_encode($data);

/*对$data进行json格式编码*/
mysql_close($conn);

?>

数据库表结构的编码格式要留意，否则会显示中文乱码。
2、前段html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>

<script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

</head>
<body>

<div id="bar_week" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

var date_week= [], num = [];
function getusers() {
$.ajax({
type:"post",
async:false, //async属性
url:"http://127.0.0.1/weekbar.php",

/*留意127.0.0.1和localhost的区别,这里用的127.0.0.1*/

data:{},
dataType:"json",

contentType: "application/x-www-form-urldecoded; charset=utf-8",
success:function(result){
if(result){
for(var i = 0;i < result.length;i++){
date_week.push(result[i].shopAlter);
num_week.push(result[i].numAlter);
}
}
},

/*加载json格式的数据*/
error:function(errmsg) {
alert("Ajax获取数据错误"+errmsg);
}
});
return date_week,num_week;
}
getusers();

// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('bar_week'));
// 指定图表的配置项和数据
var option_week = {
title: {
text: '物品统计'
},
tooltip: {
show: true
},
legend: {
data:['名称']
},
xAxis: [{
data: date_week
}],
yAxis: [{
type: 'value'
}],
series: [{
"name": "名称",
"type": "bar",
"data": num_week
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option_week);
</script>
</body>
</html>

end

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： echarts json

相关文章推荐

新的分享

章节导航