Echart获取mysql表实现图表展示
发布时间
阅读量：
阅读量
结合Echart丰富的图形库，可以把数据以图表形式展现，先上简单的效果图。
1、从数据库取数据，转为json数据格式
数据表结构为shop( 物品名称 )和num（数量），字符编码gbk_chinese
<?php
header("Content-type=text/json;charset=GBK");
4. $conn = @mysql_connect("127.0.0.1","root","root") or die("无法连接数据库...");
mysql_query("set names GBK");
mysql_select_db("identity",$conn);
AI写代码 /* $conn 连接数据库，127.0.0.1本地数据库，用户名/密码： root/root,
AI写代码 mysql_query("set names GBK") 设置字符编码格式，
AI写代码 mysql_select_db("identity",$conn) 指定要连接的数据库名"identity"
AI写代码 */
AI写代码
$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);
AI写代码 /*对$data进行json格式编码*/
mysql_close($conn);
?>
AI写代码数据库表结构的编码格式要 留意 ，否则会显示中文乱码。
2、前段html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<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>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<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",
AI写代码 /*留意127.0.0.1和localhost的区别,这里用的127.0.0.1*/
AI写代码 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);
}
}
},
AI写代码 /*加载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>
AI写代码end
全部评论 (0)
还没有任何评论哟~