前台
引用js
<script src="../js/echarts.min.js"></script>
style样式必须要有哦
<style>
.h1title {
font-size: 16px;
display: block;
text-align: center;
/*padding-top: 0.5em;*/
}
.echrttitle {
line-height: 2rem;
font-size: 14px;
height: 6rem !important;
}
.echrttitle h1 {
display: block;
border-bottom: 1px solid #CCC;
font-size: 16px;
font-weight: bolder;
}
.echrttitle span {
color: #188df0;
font-weight: bolder;
margin: 0 0.5rem;
}
/*.layui-col-sm12 {
height: 17rem;
}*/
#mychart4 li {
line-height: 3rem;
}
#mychart4 li span {
float: right;
}
#mychart4 li span b {
color: #188df0;
font-weight: bolder;
margin-right: 0.5rem;
}
.layui-fluid {
padding-left: 30px;
}
.SMenu {
position: fixed;
width: 20px;
top: 20%;
left: 5px;
z-index: 999;
}
.SMenu li {
border: 1px solid #0b4ba3;
margin-top: 0.5rem;
border-radius: 20px;
text-align: center;
line-height: 1rem;
cursor: pointer;
}
.SMenu li a {
font-size: 6px;
padding: 0.5em 0;
display:block;
height:100%;
}
.SMenu li.act, .SMenu li:hover {
background-color: #0b4ba3;
}
.SMenu li.act a, .SMenu li:hover a {
color: #FFF;
}
.layui-col-sm-two {
height: 17rem;
top:-1.5em;
}
</style>body里面这样子
<body>
<form id="form1" runat="server">
<div class="layui-fluid">
<div class="layui-row">
<div class="layui-col-sm12">
<h1 class="h1title">新增流动人口</h1>
<div class="layui-col-sm12 echrttitle">
<h1>增长趋势</h1>
<div class="layui-col-sm6">人口数量<span id="sumphone">0</span>个</div>
<div class="layui-col-sm6" style="text-align: right">今日新增数量<span id="daycount">0</span>个
<%--投诉<span id="dayts">0</span>个--%>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-sm-two" id="mychart1">
</div>
<div class="layui-col-sm6 layui-col-sm-two" id="mychart2">
</div>
<div class="layui-col-sm6 layui-col-sm-two" id="mychart3">
</div>
<div class="layui-col-sm6 layui-col-sm-two" id="mychart4">
</div>
<script>
$.ajax({
url: 'NewPerson.aspx?action=yue',
dataType: 'json',
async: false,
success: function (data) {
$("#sumphone").text(data.sum);
$("#daycount").text(data.day);
$("#dayts").text(data.dayts);
//加载
var mychart1 = echarts.init(document.getElementById('mychart1'));
var option1 = {
xAxis: {
type: 'category',
boundaryGap: false,
data: data.date
},
grid: {
left: '6%',
right: 30,
top: 10,
bottom: 50
},
yAxis: {
type: 'value'
},
legend: {
bottom: 0,
data: ['月'],
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765'
}
}
},
series: [{
name: '月',
data: data.yue,//投诉
type: 'line',
color: '#398e19',
areaStyle: {
color: '#33ba5c'
}
},
{
name: '季',
data: data.ji,
type: 'line',
color: '#a18e49',
areaStyle: {
color: '#b3980b'
}
},
{
name: '半年',
data: data.bannian,
type: 'line',
color: '#a18e49',
areaStyle: {
color: '#b3980b'
}
},
{
name: '年',
data: data.nian,
type: 'line',
color: '#a18e49',
areaStyle: {
color: '#b3980b'
}
},
]
};
mychart1.setOption(option1);
}
})
$.ajax({
url: 'NewPerson.aspx?action=jidu',
dataType: 'json',
async: false,
success: function (data) {
$("#sumphone").text(data.sum);
$("#daycount").text(data.day);
$("#dayts").text(data.dayts);
//加载
var mychart1 = echarts.init(document.getElementById('mychart2'));
var option1 = {
xAxis: {
type: 'category',
//boundaryGap: false,
data: data.date
},
grid: {
left: '6%',
right: 30,
top: 10,
bottom: 50
},
yAxis: {
type: 'value'
},
legend: {
bottom: 0,
data: [ '季'],
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765'
}
}
},
series: [{
name: '月',
data: data.yue,//投诉
type: 'line',
color: '#398e19',
barWidth: 50,
areaStyle: {
color: '#33ba5c'
}
},
{
name: '季',
data: data.ji,
type: 'bar',
color: '#a18e49',
barWidth: 50,
areaStyle: {
color: '#b3980b'
}
},
{
name: '半年',
data: data.bannian,
type: 'line',
color: '#a18e49',
areaStyle: {
color: '#b3980b'
}
},
{
name: '年',
data: data.nian,
type: 'line',
color: '#a18e49',
areaStyle: {
color: '#b3980b'
}
},
]
};
mychart1.setOption(option1);
}
})
$.ajax({
url: 'NewPerson.aspx?action=bannian',
dataType: 'json',
async: false,
success: function (data) {
$("#sumphone").text(data.sum);
$("#daycount").text(data.day);
$("#dayts").text(data.dayts);
//加载
var mychart1 = echarts.init(document.getElementById('mychart3'));
var option1 = {
xAxis: {
type: 'category',
//boundaryGap: false,
data: data.date
},
grid: {
left: '6%',
right: 30,
top: 10,
bottom: 50
},
yAxis: {
type: 'value'
},
legend: {
bottom: 0,
data: [ '半年'],
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765'
}
}
},
series: [{
name: '月',
data: data.yue,//投诉
type: 'line',
color: '#398e19',
barWidth: 50,
areaStyle: {
color: '#33ba5c'
}
},
{
name: '季',
data: data.ji,
type: 'line',
color: '#a18e49',
barWidth: 50,
areaStyle: {
color: '#b3980b'
}
},
{
name: '半年',
data: data.bannian,
type: 'bar',
color: '#006699',
barWidth: 120,
areaStyle: {
color: '#006699'
}
},
{
name: '年',
data: data.nian,
type: 'line',
color: '#a18e49',
areaStyle: {
color: '#b3980b'
}
},
]
};
mychart1.setOption(option1);
}
})
$.ajax({
url: 'NewPerson.aspx?action=nian',
dataType: 'json',
async: false,
success: function (data) {
$("#sumphone").text(data.sum);
$("#daycount").text(data.day);
$("#dayts").text(data.dayts);
//加载
var mychart1 = echarts.init(document.getElementById('mychart4'));
var option1 = {
xAxis: {
type: 'category',
//boundaryGap: false,
data: data.date
},
grid: {
left: '6%',
right: 30,
top: 10,
bottom: 50
},
yAxis: {
type: 'value'
},
legend: {
bottom: 0,
data: [ '年'],
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765'
}
}
},
series: [{
name: '月',
data: data.yue,//投诉
type: 'line',
color: '#398e19',
barWidth: 50,
areaStyle: {
color: '#33ba5c'
}
},
{
name: '季',
data: data.ji,
type: 'line',
color: '#a18e49',
barWidth: 50,
areaStyle: {
color: '#b3980b'
}
},
{
name: '半年',
data: data.bannian,
type: 'line',
color: '#a18e49',
areaStyle: {
color: '#b3980b'
}
},
{
name: '年',
data: data.nian,
type: 'bar',
color: '#e5323e',
barWidth: 100,
areaStyle: {
color: '#e5323e'
}
},
]
};
mychart1.setOption(option1);
}
})
</script>
</div>
</form>
</body>后台代码
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Request.QueryString["action"] != null)
{
Bind();
}
}
}
private void Bind()
{
switch (Request.QueryString["action"])
{//每个case根据不同的月，季，半年，年进行查询并返回json
case "yue"://按月统计
int sum = (int)DbHelperSQL.GetSingle("select count(fid) from FloatingPopulation where FState=0");
int day = (int)DbHelperSQL.GetSingle("select COUNT(fid) from FloatingPopulation where FState=0 and DATEDIFF(D,addtime,GETDATE())=0");//当日人员数量
int dayts = (int)DbHelperSQL.GetSingle("select COUNT(fid) from FloatingPopulation where FState=0 and DATEDIFF(D,addtime,GETDATE())=0");//当日的新增数量
string date = "[";
string yue = "[";
string ji = "[";
string bannian = "[";
string nian = "[";
System.Data.DataTable tscldt = DbHelperSQL.QueryDT("SELECT COUNT(*) shuliang,CONVERT(VARCHAR(7),addtime, 120) yuefen FROM [FloatingPopulation] where FState = 0 GROUP BY CONVERT(VARCHAR(7),addtime, 120)");//最大与最小日期
foreach (DataRow dr in tscldt.Rows)
{
yue += "\"" + dr["shuliang"] + "\",";
date += "\"" + dr["yuefen"] + "\",";
}
date = date.TrimEnd(',') + "]";
yue = yue.TrimEnd(',') + "]";
ji = ji.TrimEnd(',') + "]";
bannian = bannian.TrimEnd(',') + "]";
nian = nian.TrimEnd(',') + "]";
Response.Write("{\"sum\":" + sum + ",\"day\":" + day + ",\"dayts\":" + dayts + ",\"date\":" + date + ",\"yue\":" + yue + "}");
break;
case "jidu"://按季度统计
int sum_jidu = (int)DbHelperSQL.GetSingle("select count(fid) from FloatingPopulation where FState=0");
int day_jidu = (int)DbHelperSQL.GetSingle("select COUNT(fid) from FloatingPopulation where FState=0 and DATEDIFF(D,addtime,GETDATE())=0");//当日人员数量
int dayts_jidu = (int)DbHelperSQL.GetSingle("select COUNT(fid) from FloatingPopulation where FState=0 and DATEDIFF(D,addtime,GETDATE())=0");//当日的新增数量
string date_jidu = "[";
string yue_jidu = "[";
string ji_jidu = "[";
string bannian_jidu = "[";
string nian_jidu = "[";
System.Data.DataTable tscldt_jidu = DbHelperSQL.QueryDT("select case when month(addtime) =1 or month(addtime) =2 or month(addtime)=3 then '1季度' when month(addtime) =4 or month(addtime) =5 or month(addtime)=6 then '2季度' when month(addtime) =7 or month(addtime) =8 or month(addtime)=9 then '3季度' when month(addtime) =10 or month(addtime) =11 or month(addtime)=12 then '4季度' else '' end as jidu ,count(*) as shuliang from [FloatingPopulation] where FState = 0 group by case when month(addtime) =1 or month(addtime) =2 or month(addtime)=3 then '1季度' when month(addtime) =4 or month(addtime) =5 or month(addtime)=6 then '2季度' when month(addtime) =7 or month(addtime) =8 or month(addtime)=9 then '3季度' when month(addtime) =10 or month(addtime) =11 or month(addtime)=12 then '4季度' else '' end");//最大与最小日期
foreach (DataRow dr in tscldt_jidu.Rows)
{
ji_jidu += "\"" + dr["shuliang"] + "\",";
date_jidu += "\"" + dr["jidu"] + "\",";
}
date_jidu = date_jidu.TrimEnd(',') + "]";
yue_jidu = yue_jidu.TrimEnd(',') + "]";
ji_jidu = ji_jidu.TrimEnd(',') + "]";
bannian_jidu = bannian_jidu.TrimEnd(',') + "]";
nian_jidu = nian_jidu.TrimEnd(',') + "]";
Response.Write("{\"sum\":" + sum_jidu + ",\"day\":" + day_jidu + ",\"dayts\":" + dayts_jidu + ",\"date\":" + date_jidu + ",\"ji\":" + ji_jidu + "}");
break;
case "bannian"://按半年统计
int sum_bannian = (int)DbHelperSQL.GetSingle("select count(fid) from FloatingPopulation where FState=0");
int day_bannian = (int)DbHelperSQL.GetSingle("select COUNT(fid) from FloatingPopulation where FState=0 and DATEDIFF(D,addtime,GETDATE())=0");//当日人员数量
int dayts_bannian = (int)DbHelperSQL.GetSingle("select COUNT(fid) from FloatingPopulation where FState=0 and DATEDIFF(D,addtime,GETDATE())=0");//当日的新增数量
string date_bannian = "[";
string bannian_bannian = "[";
System.Data.DataTable tscldt_bannian = DbHelperSQL.QueryDT("select case when month(addtime) =1 or month(addtime) =2 or month(addtime)=3 or month(addtime) =4 or month(addtime) =5 or month(addtime)=6 then '上半年' when month(addtime) =7 or month(addtime) =8 or month(addtime)=9 or month(addtime) =10 or month(addtime) =11 or month(addtime)=12 then '下半年' else '' end as bannian ,count(*) as shuliang from [FloatingPopulation] where FState = 0 group by case when month(addtime) =1 or month(addtime) =2 or month(addtime)=3 or month(addtime) =4 or month(addtime) =5 or month(addtime)=6 then '上半年' when month(addtime) =7 or month(addtime) =8 or month(addtime)=9 or month(addtime) =10 or month(addtime) =11 or month(addtime)=12 then '下半年' else '' end");
foreach (DataRow dr in tscldt_bannian.Rows)
{
bannian_bannian += "\"" + dr["shuliang"] + "\",";
date_bannian += "\"" + dr["bannian"] + "\",";
}
date_bannian = date_bannian.TrimEnd(',') + "]";
bannian_bannian = bannian_bannian.TrimEnd(',') + "]";
Response.Write("{\"sum\":" + sum_bannian + ",\"day\":" + day_bannian + ",\"dayts\":" + dayts_bannian + ",\"date\":" + date_bannian + ",\"bannian\":" + bannian_bannian + "}");
break;
case "nian"://按一年统计
int sum_nian = (int)DbHelperSQL.GetSingle("select count(fid) from FloatingPopulation where FState=0");
int day_nian = (int)DbHelperSQL.GetSingle("select COUNT(fid) from FloatingPopulation where FState=0 and DATEDIFF(D,addtime,GETDATE())=0");//当日人员数量
int dayts_nian = (int)DbHelperSQL.GetSingle("select COUNT(fid) from FloatingPopulation where FState=0 and DATEDIFF(D,addtime,GETDATE())=0");//当日的新增数量
string date_nian = "[";
string nian_nian = "[";
System.Data.DataTable tscldt_nian = DbHelperSQL.QueryDT("SELECT COUNT(*) shuliang,CONVERT(VARCHAR(4),addtime, 120) nian FROM [FloatingPopulation] where FState = 0 GROUP BY CONVERT(VARCHAR(4),addtime, 120)");//最大与最小日期
foreach (DataRow dr in tscldt_nian.Rows)
{
nian_nian += "\"" + dr["shuliang"] + "\",";
date_nian += "\"" + dr["nian"] + "\",";
}
date_nian = date_nian.TrimEnd(',') + "]";
nian_nian = nian_nian.TrimEnd(',') + "]";
Response.Write("{\"sum\":" + sum_nian + ",\"day\":" + day_nian + ",\"dayts\":" + dayts_nian + ",\"date\":" + date_nian + ",\"nian\":" + nian_nian + "}");
break;
}
Response.End();
}好啦，简单实现了，后台里的sql还涉及到了按年度，按月份，按季度统计的逻辑
效果图
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
