ASP.NET 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)       提取碼：tfr3

1、首先去百度搜索Echarts去下載須要的圖表實例

　　Echarts圖表實例下載：https://www.echartsjs.com/zh/download.html；其中能夠自定義下載，也能夠下載所有，根據我的需求進行實例的下載便可！或者直接點擊上方連接直接下載

2、建立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(); }

 3、建立控制器Controller，在控制器建立操做方法（這是建立了DAL層與BLL層的控制器代碼）根據本身的需求選擇控制器Controller中 三or四中的代碼

　　注意：

　　　　一、建立的操做方法是不能用來生成視圖，否則會報錯：找不到該資源路徑！！！；須要一個HttpGet方法的操做方法來生成視圖
　　　　二、操做方法的返回類型是使用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); }

 4、建立控制器Controller，在控制器建立操做方法（這是沒有建立DAL層與BLL層的控制器代碼）

　　　循環遍歷能夠不用寫，直接轉換成Json數據格式，根據本身的需求來選擇1方法或者2方法

[HttpPost] public JsonResult GetEchartsIndex() { 　　using (ExamDBEntities db = new ExamDBEntities()) 　　{ 　　　　//循環遍歷能夠不用寫，直接轉換成Json數據格式，根據本身的足需求來選擇1方法或者2方法 　　　　//一、循環遍歷添加數據
　　　　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); 　　　　//二、不循環添加數據直接數據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); 　　} }

5、在項目中建立一個新視圖或者打開你須要放圖表的視圖頁面

　　在新的視圖頁面或者你須要顯示圖表的視圖頁面中建立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

 

　　柱狀圖效果圖：

 

 

　　餅狀圖效果圖：