天天看點
傳回

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

一、首先去百度搜尋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根據自己的需要自行設定。

　　視圖界面代碼：

ASP.NET MVC+三層架構+Echarts繪制統計圖表
ASP.NET MVC+三層架構+Echarts繪制統計圖表
@{
    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'));//初始化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

　　柱狀圖效果圖：

ASP.NET MVC+三層架構+Echarts繪制統計圖表

　　餅狀圖效果圖：

ASP.NET MVC+三層架構+Echarts繪制統計圖表
上一篇: 【NOIP2012】洛谷1084 疫情控制
下一篇: [NOIP2017模拟]能源