<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="echarts.js" ></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<title>数据库图形</title>
</head>
<body>
</body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
//初始化
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: 'test'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
//数据加载完之前先显示一段简单的loading动画
myChart.showLoading();
//名字数组(实际用来盛放X轴坐标值)
var names=[];
//value数组(实际用来盛放Y坐标值)
var nums=[];
$.ajax({
type : "get",
async : true,
url : "1.php",
data : {},
//返回数据形式为json
dataType : "json",
//请求成功时执行该函数内容,result即为服务器返回的json对象
success : function(result) {
// alert("连接成功");
if (result) {
for(var i=0;i<result.length;i++){
//挨个取出name并填入名字数组,这个xname是根据你在php那发过来的列表来的,下面那个ysh也是
names.push(result[i].xname);
}
for(var i=0;i<result.length;i++){
//挨个取出value并填入value数组
nums.push(result[i].ysh);
}
//数据都存进去了,就不需要加载动画了,所以这里把他隐藏
myChart.hideLoading();
//将图表渲染进容器里
myChart.setOption({
xAxis: {
data: names
},
series: [
name: '销量',data: nums
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</html>