Echarts
功能强大,如果项目中需要根据后台数据生成统计图表,那么Echarts
绝对是不二选择。下面就来介绍一下如何利用ASP.NET + Echarts
来生成折线图、柱状图、饼图这三类基本的统计图。首先在SqlServer
中建立一张测试表[TSales]
,该表模拟某商店在2019年每天的销售金额,共有365
条记录,如下图所示:
下面需要按照月份对该数据表进行划分,生成相应的折线图、柱状图、饼图,同时还需要根据季度对该数据表进行划分,生成另一个饼图,如下图所示:
前端代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>ASP.NET + ECharts</title>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="lib/bootstrap/js/jquery-3.4.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/echarts/echarts.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="aa" class="col-md-6" style="height:450px;"></div>
<div id="bb" class="col-md-6" style="height:450px;"></div>
</div>
<div class="row">
<div id="cc" class="col-md-6" style="height:450px;"></div>
<div id="dd" class="col-md-6" style="height:450px;"></div>
</div>
</div>
<script>
$(document).ready(function () {
$.ajax({
type: 'post',
url: 'ashx/QueryByMonthHandler.ashx',
dataType: 'json',
async: false,
success: function (data) {
getLineChart(data.month, data.sales);
getBarChart(data.month, data.sales);
getPieChartByMonth(data.month, data.sales);
}
})
$.ajax({
type: 'post',
url: 'ashx/QueryByQuarterHandler.ashx',
dataType: 'json',
async: false,
success: function (data) {
getPieChartByQuarter(data.month, data.sales);
}
})
})
// 折线图
function getLineChart(x, y) {
var line = echarts.init(document.getElementById('aa'));
line.setOption({
title: {
text: '月度统计报告/折线图',
left: 'center'
},
tooltip: {},
xAxis: {
name: '月份',
data: x
},
yAxis: {
type: 'value',
name: '销售金额(万元)'
},
series: [{
name: '销售金额',
type: 'line',
data: y,
areaStyle: {
normal: {
color: 'skyblue'
}
},
itemStyle: {
normal: {
color: 'skyblue',
lineStyle: {
color: 'skyblue'
}
}
}
}]
})
}
// 柱状图
function getBarChart(x, y) {
var bar = echarts.init(document.getElementById('bb'));
bar.setOption({
title: {
text: '月度统计报告/柱状图',
left: 'center'
},
color: ['greenyellow'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
name: '月份',
data: x,
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '销售金额(万元)',
type: 'bar',
barWidth: '60%',
data: y
}
]
})
}
// 饼图——按月份
function getPieChartByMonth(x, y) {
var items = [];
for (var i = 0; i < x.length; i++) {
items.push({
value: y[i],
name: x[i]
})
}
var pie = echarts.init(document.getElementById('cc'));
pie.setOption({
title: {
text: '月度统计报告/饼图',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: x
},
series: [
{
name: '销售金额(万元)',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: items,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
}
// 饼图——按季度
function getPieChartByQuarter(x, y) {
var items = [];
for (var i = 0; i < x.length; i++) {
items.push({
value: y[i],
name: x[i]
})
}
var pie = echarts.init(document.getElementById('dd'));
pie.setOption({
title: {
text: '季度统计报告/饼图',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: x
},
series: [
{
name: '销售金额(万元)',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: items,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
}
</script>
</body>
</html>
后台代码
按月查询
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;
using Newtonsoft.Json;
namespace WebApplication1.ashx
{
/// <summary>
/// LineChartDataHandler 的摘要说明
/// </summary>
public class QueryByMonthHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// 按月查询数据
DataTable dataTable = new DataTable();
string sql = "select sum(Sales) as Sales from [TSales] group by datepart(mm,Time)";
using (SqlDataAdapter adapter = new SqlDataAdapter(sql, ConfigurationManager.ConnectionStrings["ConnectionString"].ToString()))
{
adapter.Fill(dataTable);
}
// 月份
List<string> month = new List<string>();
month.AddRange(new string[] { "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" });
// 销售额
List<double> sales = new List<double>();
for (int i = 0; i < dataTable.Rows.Count; i++)
{
DataRow dataRow = dataTable.Rows[i];
sales.Add(double.Parse(dataRow["Sales"].ToString()));
}
// 返回前端数据
var obj = new
{
month = month,
sales = sales
};
context.Response.Write(JsonConvert.SerializeObject(obj));
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
按季度查询
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;
using Newtonsoft.Json;
namespace WebApplication1.ashx
{
/// <summary>
/// QueryByQuarterHandler 的摘要说明
/// </summary>
public class QueryByQuarterHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// 按月查询数据
DataTable dataTable = new DataTable();
string sql = "select sum(Sales) as Sales from [TSales] group by datepart(mm,Time)";
using (SqlDataAdapter adapter = new SqlDataAdapter(sql, ConfigurationManager.ConnectionStrings["ConnectionString"].ToString()))
{
adapter.Fill(dataTable);
}
// 季度
List<string> month = new List<string>();
month.AddRange(new string[] { "第一季度", "第二季度", "第三季度", "第四季度" });
// 按季度分类
double[] quarter = new double[4];
for (int i = 0; i < dataTable.Rows.Count; i++)
{
DataRow dataRow = dataTable.Rows[i];
if (i >= 0 && i <= 2)
{
quarter[0] += double.Parse(dataRow["Sales"].ToString());
}
else if (i >= 3 && i <= 5)
{
quarter[1] += double.Parse(dataRow["Sales"].ToString());
}
else if (i >= 6 && i <= 8)
{
quarter[2] += double.Parse(dataRow["Sales"].ToString());
}
else
{
quarter[3] += double.Parse(dataRow["Sales"].ToString());
}
}
// 销售额
List<double> sales = new List<double>();
sales.AddRange(quarter);
// 返回前端数据
var obj = new
{
month = month,
sales = sales
};
context.Response.Write(JsonConvert.SerializeObject(obj));
}
public bool IsReusable
{
get
{
return false;
}
}
}
}