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文件包下载：(https://pan.baidu.com/s/1y9AIdlzhMzXINlRGjp3BAQ)       提取码：tfr3

一、首先去百度搜索Echarts去下载需要的图表实例

　　Echarts图表实例下载：https://www.echartsjs.com/zh/download.html；其中可以自定义下载，也可以下载全部，根据个人需求进行实例的下载即可！或者直接点击上方链接直接下载

二、创建DAL与BLL层（可不创建DAL与BLL,可直接将访问数据库的代码写在控制器Controllers中）

　　将需要显示的数据信息利用DAL层以及BLL层写好！例如 DAL层：

public static List SelectClassInfo()
{
    using (ExamDBEntities db = new ExamDBEntities())
        {
            //利用EF框架通过分组查询男女生人数，其中Name：代表数据库中的性别；Nums：代表查询出来的人数
            var all = db.Student.GroupBy(s => new { s.StuSex}).Select(s => new { Name = s.Key.StuSex, Nums = s.Count() }).ToList();
　　　　　　　var list = new List();
　　　　　　　　foreach (var temp in all)
　　　　　　　　{
　　　　　　　　//为了方便数据显示，重新new了Student对象,将Name赋值给StuSex，将Nums赋值给StuID
　　　　　　　　　　var energyFlowGraph = new Student();
　　　　　　　　　　energyFlowGraph.StuSex = temp.Name;
　　　　　　　　　　energyFlowGraph.StuID = temp.Nums;
　　　　　　　　　　list.Add(energyFlowGraph);
　　　　　　　　}
　　　　　　　　　　return list;
　　　　　}
}                

　　BLL层：

public static List ClassInfo()
{
　　return EchartsService.SelectClassInfo();
}

 三、创建控制器Controller，在控制器创建操作方法（这是创建了DAL层与BLL层的控制器代码）根据自己的需求选择控制器Controller中 三or四中的代码

　　注意：

　　　　1、创建的操作方法是不能用来生成视图，不然会报错：找不到该资源路径！！！；需要一个HttpGet方法的操作方法来生成视图
　　　　2、操作方法的返回类型是使用JsonResult，而不是ActionResult，并且返回的数据是Json

[HttpPost]
public JsonResult GetEchartsPie()
{
　　//声明两个动态数据，存储循环出来的数据
　　ArrayList xAxisData = new ArrayList();
　　ArrayList yAxisData = new ArrayList();
　　//调用BLL层代码
　　var list = EchartsManager.ClassInfo();
　　//循环list将数据循环存储在动态数组中
　　foreach (var item in list)
　　{
　　　　xAxisData.Add(item.StuSex ? "男" : "女");//通过三目元算符将Bool值“true”或“false”转换成男或女
　　　　yAxisData.Add(item.StuID);
　　}
　　　　//多个
　　　　//result = new object[] { new { xname = xAxisData, num = yAxisData }, new { } };
　　var result = new { Sex = xAxisData, Num = yAxisData };
　　return Json(result);
}

 四、创建控制器Controller，在控制器创建操作方法（这是没有创建DAL层与BLL层的控制器代码）

　　　循环遍历可以不用写，直接转换成Json数据格式，根据自己的需求来选择1方法或者2方法

[HttpPost]
public JsonResult GetEchartsIndex()
{
　　using (ExamDBEntities db = new ExamDBEntities())
　　{
　　　　//循环遍历可以不用写，直接转换成Json数据格式，根据自己的足需求来选择1方法或者2方法
　　　　//1、循环遍历添加数据
　　　　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 ? "男" : "女");//通过三目元算符将Bool值“true”或“false”转换成男或女
　　　　　　yAxisData.Add(item.ID);
　　　　}
　　　　var result = new { Sex = xAxisData, Num = yAxisData };
　　　　return Json(result,JsonRequestBehavior.AllowGet);

　　　　//2、不循环添加数据直接数据Json化数据
　　　　var all = db.Student.GroupBy(s => new { s.StuSex }).Select(s => new { Name = s.Key.StuSex, ID = s.Count() }).ToList();
　　　　return Json(new { data= all },JsonRequestBehavior.AllowGet);
　　}
}

五、在项目中创建一个新视图或者打开你需要放图表的视图页面

　　在新的视图页面或者你需要显示图表的视图页面中创建div，并且为div设置CSS样式；同时引用jquery-3.4.1.min.js（使用了布局页面的就不需要引用jquery）、echarts.min.js。【注意】必须先引用jquery，不然会报错！因为Echarts是基于JQuery库；width和height根据自己的需要自行设定。

　　视图界面代码

@{
    ViewBag.Title = "Home Page";
}
@* 男女生人数柱状图 *@
"main" style="width: 500px; height:400px">

@* 男女生人数饼状图 *@
"Pie" style="width: 600px; height:400px">


@section scripts{
    
    
}

View Code

 

　　柱状图效果图：

 

 

　　饼状图效果图：