前言
本文介紹了在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 = https://www.cnblogs.com/lucasDC/p/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 = https://www.cnblogs.com/lucasDC/p/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=https://www.cnblogs.com/lucasDC/p/ 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=https://www.cnblogs.com/lucasDC/p/"~/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'));//初始化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
柱狀圖效果圖：
餅狀圖效果圖：
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/84.html
標籤：ASP.NET MVC