前言 本文介紹了在ASP.NET MVC中使用ECharts的詳細過程，希望對使用該方法的朋友有所幫助。 相關Echarts的js文件包括：echarts.min.js、echarts-wordcloud.min.js、china.js、jquery-3.4.1.min.js 相關Echarts的j ...
前言
本文介紹了在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<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 (data) { //根據自己的希求以及熟練程度選擇for迴圈或者$.each迴圈方法 //for迴圈遍歷所需的數據 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的方式接收字元串 } //$.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'));//初始化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',//觸發類型；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
柱狀圖效果圖：
餅狀圖效果圖：
