ASP.NET MVC+三层架构+Echarts绘制统计图表
作者：互联网
本文介绍了在ASP.NET MVC中使用ECharts的详细过程，希望对使用该方法的朋友有所帮助。
相关Echarts的js文件包括：echarts.min.js、echarts-wordcloud.min.js、china.js、jquery-3.4.1.min.js
相关Echarts的js文件包下载
提取码：tfr3
一、首先去百度搜索Echarts去下载需要的图表实例
Echarts图表实例下载。其中可以自定义下载，也可以下载全部，根据个人需求进行实例的下载即可！或者直接点击上方链接直接下载
二、创建DAL与BLL层（可不创建DAL与BLL,可直接将访问数据库的代码写在控制器Controllers中）
将需要显示的数据信息利用DAL层以及BLL层写好！例如 DAL层：
public static List<Student> SelectClassInfo()
{
using (ExamDBEntities db = new ExamDBEntities())
{
//利用EF框架通过分组查询男女生人数
var all = db.Student.GroupBy(s => new { s.StuSex}).Select(s => new { Name = s.Key.StuSex, ID = s.Count() }).ToList();
var list = new List<Student>();
foreach (var temp in all)
{
var energyFlowGraph = new Student();
energyFlowGraph.StuSex = temp.Name;
energyFlowGraph.StuID = temp.ID;
list.Add(energyFlowGraph);
}
return list;
}
}
BLL层
public static List<Student> ClassInfo()
{
return EchartsService.SelectClassInfo();
}
三、创建控制器Controller，在控制器创建操作方法（这是创建了DAL层与BLL层的控制器代码）根据自己的需求选择控制器Controller中 三or四中的代码
注意：是使用JsonResult，而不是ActionResult,而且返回的是Json
[HttpPost]
public JsonResult GetEchartsPie()
{
//声明两个动态数据，存储循环出来的数据
ArrayList xAxisData = new ArrayList();
ArrayList yAxisData = new ArrayList();
var list = EchartsManager.ClassInfo();
//循环list将数据循环存储在动态数组中
foreach (var item in list)
{
xAxisData.Add(item.StuSex ? "男" : "女");
yAxisData.Add(item.StuID);
}
//多个
//result = new object[] { new { xname = xAxisData, num = yAxisData }, new { } };
result = new { Sex = xAxisData, Num = yAxisData };
return Json(result);
}
四、创建控制器Controller，在控制器创建操作方法（这是没有创建DAL层与BLL层的控制器代码）
[HttpPost]
public JsonResult GetEchartsIndex()
{
using (ExamDBEntities db = new ExamDBEntities())
{
var all = db.Student.GroupBy(s => new { s.StuSex }).Select(s => new { Name = s.Key.StuSex, ID = s.Count() }).ToList();
//声明两个动态数据，存储循环出来的数据
ArrayList xAxisData = new ArrayList();
ArrayList yAxisData = new ArrayList();
//循环list将数据循环存储在动态数组中
foreach (var item in all)
{
xAxisData.Add(item.Name ? "男" : "女");
yAxisData.Add(item.ID);
}
//多个
//result = new object[] { new { xname = xAxisData, num = yAxisData }, new { } };
result = new { Sex = xAxisData, Num = yAxisData };
return Json(result);
}
}
五、在项目中创建一个新视图或者打开你需要放图表的视图页面
在新的视图页面或者你需要显示图表的视图页面中创建div，并且为div设置CSS样式；同时引用jquery-3.4.1.min.js、echarts.min.js。【注意】必须先引用jquery-3.4.1.min.js，不然会报错！因为Echarts是基于JQuery库；width和height根据自己的需要自行设定。
@{
ViewBag.Title = "Home Page";
}
@* 男女生人数柱状图 *@
<div id="main" style="width: 500px; height:400px"></div>
@* 男女生人数饼状图 *@
<div id="Pie" style="width: 600px; height:400px"></div>
@section scripts{
<script src="~/Scripts/echarts.min.js"></script>
<script type="text/javascript">
//男女生人数比例柱状图
$(function () {
Bar();
});
var names = []; //定义数组，数组可自由定义
var scores = [];
function Bar() {
// 基于准备好的dom，初始化echarts实例
$.ajax({
url: "/Home/GetEchartsIndex",
type: "post",
async: false,
dataType: "json",
success: function (data) {
for (var i = 0; i < data.Num.length; i++) {
scores[i] = JSON.parse(data.Num[i]);//以特定的JSON的格式接收数字
}
for (var i = 0; i < data.Sex.length; i++) {
names[i] = data.Sex[i];//以JSON的方式接收字符串
}
InitChart(names, scores);
},
error: function (error) {
alert("Ajax获取服务器数据出错了！" + error);
}
});
}
//创建一个方法来封装柱状图
function InitChart(names, scores) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));//初始化echarts
option = {
title: {
text: '各班男女生人数',
textStyle: {
color: 'red',
fontWeight: 'bold',
fontStyle: 'italic',
fontFamily: '微软雅黑'
},
subtext: '男女生人数对比',
subtextStyle: {
color: 'black',
fontFamily: '微软雅黑'
},
x: 'center'
},
grid: {
top: '20%',
},
xAxis: {
name: '性别',
type: 'category',
data: names,
axisLabel: {
rotate: '35',
interval: 0
}
},
tooltip: {
trigger: 'axis',
},
toolbox: {
feature: {
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
yAxis: {
type: 'value',
name: '人数',
},
series: [{
data: scores,
type: 'bar',
label: {
normal: {
formatter: "{c}" + "人",
show: true,
position: 'top',
textStyle: {
color: 'black',
fontFamily: '微软雅黑'
}
}
},
}]
};
// 使用刚指定的配置项和数据显示图表-绑定数据
myChart.setOption(option);
}
//男女生人数比例饼状图
$(function () {
Pie();
});
var Sex = []; //定义数组
var Info = [];
function Pie() {
$.ajax({
url: "/Home/GetEchartsPie",
type: "post",
async: false,
dataType: "json",
success: function (result) {
for (var i = 0; i < result.Num.length; i++) {
Info[i] = { value: result.Num[i], name: result.Sex[i] };
}
for (var i = 0; i < result.Sex.length; i++) {
Sex[i] = result.Sex[i];//以JSON的方式接收字符串
}
InitPie(Sex, Info);
},
error: function (error) {
alert("Ajax获取服务器数据出错了！" + error);
}
});
}
//创建一个方法来封装饼状图
function InitPie(Sex, Info) {
//获取页面div的id属性
// 基于准备好的dom，初始化echarts实例
var myChartPie = echarts.init(document.getElementById('Pie'));
option_Pie = {
title: {
text: '男女生人数', //可视化主标题
textStyle: {
color: 'red',
fontWeight: 'bold',
fontStyle: 'italic',
fontFamily: '微软雅黑'
}, //主标题的样式
subtext: '男女生人数对比', //副标题
subtextStyle: {
color: 'black',
fontFamily: '微软雅黑'
}, //副标题的样式
x: 'center'
},
//图例
legend: {
data: Sex,
orient: 'vertical', //图例列表的布局朝向，取值：'vertical'/'horizontal'
left: '10%',
},
//提示框组件
tooltip: {
trigger: 'item', //触发类型；item:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
formatter: "{a}<br/>{b} ：{c}人 ({d}%)"
},
//工具组件：如：下载保存统计图表、切换为折线图、切换为柱状图
toolbox: {
feature: {
saveAsImage: { show: true }
}
},
label: {
show: true,
},
series: [{
name: '性别',
radius: '50%',// 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
center: ['50%', '55%'], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
data: Info,
type: 'pie',
}]
};
// 使用刚指定的配置项和数据显示图表-绑定数据
myChartPie.setOption(option_Pie);
}
</script>
}
柱状图效果图：
饼状图效果图：
标签：function,ASP,Sex,统计图表,MVC,result,var,new,男女生 来源： https://blog.csdn.net/weixin_44146294/article/details/106770129