|
前言 本文介绍了在ASP.NET MVC中使用ECharts的详细过程，希望对使用该方法的朋友有所帮助。 一、首先去百度搜索Echarts去下载需要的图表实例Echarts图表实例下载：https://www./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方法的操作方法来生成视图 [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>} 柱状图效果图：
|
|
|
