通过ECharts、jQuery，实现图表显示处理。
一、ECharts和jQuery
1、下载：http://echarts.baidu.com/
echarts.min.js
2、下载：https://jquery.com/
jquery-3.3.1.min.js
二、数据文件
user.php
<?php
echo '[{"name":"9001","age":"28"},{"name":"9002","age":"29"},{"name":"9003","age":"30"},{"name":"9004","age":"31"},{"name":"9005","age":"32"},{"name":"9005","age":"33"}]';
?>
三、demo
1、柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="echarts.min.js"></script>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 加载数据
var arrUserName = [], arrUserAge = [];
function initUser() {
$.ajax({
type: "post",
async: false,
url: "user.php",
data: {},
dataType: "json",
success: function(result) {
if (result) {
for (var i = 0; i < result.length; i++) {
arrUserName.push(result[i].name);
arrUserAge.push(result[i].age);
}
}
}
})
return arrUserName, arrUserAge;
}
initUser();
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 柱状图 入门示例'
},
tooltip: {
show: true
},
legend: {
data:['age']
},
xAxis : [
{
type : 'category',
data : arrUserName
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name": "age",
"type": "bar",
"data": arrUserAge
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>
</html>
2、折线图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="echarts.min.js"></script>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 加载数据
var arrUserName = [], arrUserAge = [];
function initUser() {
$.ajax({
type: "post",
async: false,
url: "user.php",
data: {},
dataType: "json",
success: function(result) {
if (result) {
for (var i = 0; i < result.length; i++) {
arrUserName.push(result[i].name);
arrUserAge.push(result[i].age);
}
}
}
})
return arrUserName, arrUserAge;
}
initUser();
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 折线图 入门示例'
},
tooltip: {
show: true
},
legend: {
data:['age']
},
xAxis : [
{
type : 'category',
data : arrUserName
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
//"name": "age",
"type": "line",
"data": arrUserAge
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>
</html>
