本文介紹了在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>
}
柱狀圖效果圖：
餅狀圖效果圖：
