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)
一、首先去百度搜索Echarts去下载需要的图表实例
Echarts图表实例下载：https://www.echartsjs.com/zh/download.html；其中可以自定义下载，也可以下载全部，根据个人需求进行实例的下载即可！或者直接点击上方链接直接下载
二、创建DAL与BLL层（可不创建DAL与BLL,可直接将访问数据库的代码写在控制器Controllers中）
将需要显示的数据信息利用DAL层以及BLL层写好！例如 DAL层：
public static List<Student> 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<Student>();
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<Student> 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";
}
@* 男女生人数柱状图 *@<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() {
$.ajax({
url: "/Home/GetEchartsIndex",
type: "post",async: false,
dataType: "json",
success: function (result) {//根据自己的希求以及熟练程度选择for循环或者$.each循环方法//for循环遍历所需的数据for (var i = 0; i < result.Num.length; i++) {
scores[i] = JSON.parse(result.Num[i]);//以特定的JSON的格式接收数字 }for (var i = 0; i < result.Sex.length; i++) {
names[i] = result.Sex[i];//以JSON的方式接收字符串 }//$.each方法遍历所需的数据 $.each(result.data, function (index, item) {
names.push(item.Name?"男":"女");//通过三目元算符将Bool值“true”或“false”转换成男或女 scores.push(item.ID )
});//调用柱状图方法 InitChart(names, scores);
},
error: function (error) {
alert("Ajax获取服务器数据出错了！" + error);
}
});
}//创建一个方法来封装柱状图 function InitChart(names, scores) {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));//初始化echartsoption = {
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',//触发类型；item:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；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循环遍历所需的数据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>}
View Code
柱状图效果图：
饼状图效果图：
赞 (0)