<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折线统计图</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
.box {
width: 100%;
height: 100%;
margin-top: 10px;
margin-right: 0px;
padding: 0px;
border: 1px #d7d7d7 solid;
border-top: 0 none;
font-size: 24px;
text-align: center;
}
.item > label {
display: inline-block;
width: 300px;
text-align: center;
color: #999;
font-family: sans-serif;
font-size: 24px;
}
.item > label1 {
display: inline-block;
width: 350px;
text-align: left;
color: #999;
font-family: sans-serif;
font-size: 19px;
}
label > span {
color: black;
}
label1 > span {
color: black;
}
.right {
float: right;
}
</style>
</head>
<body class="box">
<div class="item">
<label><span>折线统计图</span></label>
</div>
<div class="item">
<label1 class="item right"><span>总注册用户：</span><span id="total">100</span></label1>
</div>
<div id="main" class="item" style="width:100%;height:90%;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['注册人数']
},
xAxis: {
interval: '0',
type: 'category',
data: ['20230101', '20230102', '20230103', '20230104', '20230105']
},
yAxis: {
type: 'value'
},
series: [{
name: '人数',
type: 'line',
data: [23, 40, 30, 50, 19]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
var x_data = [];
var line_data = [];
$.ajax({
"type": 'post',
"url": "count_new_user2",
"dataType": "json",
"data": {},
"success": function (result) {
var dataObj;
//判断是否是json格式
if ((typeof result == 'object') && result.constructor == Object) {
dataObj = result;
} else {
dataObj = eval("(" + result + ")");
}
for (var i = 0; i < dataObj.length; i++) {
//console.log('dataObj[i]=',dataObj[i].count);
x_data.push(dataObj[i].date);
line_data.push(dataObj[i].count);
}
//console.log("x_data=", x_data);
//console.log("line_data=", line_data);
myChart.hideLoading();
myChart.setOption({
xAxis: {
data: x_data
},
series: [{
name: '注册人数',
data: line_data
}]
});
},
"error": function (result) {
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
$.ajax({
"type": 'post',
"url": "total",
"dataType": "json",
"data": {},
"success": function (result) {
console.log(result);
var dataObj;
//判断是否是json格式
if ((typeof result == 'object') && result.constructor == Object) {
dataObj = result;
} else {
dataObj = eval("(" + result + ")");
}
$("#total").text(dataObj.total);
},
"error": function (result) {
}
});
</script>
</body>
</html>
