ASP.NET MVC+三层架构+Echarts绘制统计图表

时间 2020-06-22

标签 asp.net asp mvc 三层架构 echarts 绘制统计图表栏目 ASP 繁體版

原文原文链接

前言javascript

　　本文介绍了在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) 提取码：tfr3html

1、首先去百度搜索Echarts去下载须要的图表实例

　　Echarts图表实例下载：https://www.echartsjs.com/zh/download.html；其中能够自定义下载，也能够下载所有，根据我的需求进行实例的下载便可！或者直接点击上方连接直接下载java

2、建立DAL与BLL层（可不建立DAL与BLL,可直接将访问数据库的代码写在控制器Controllers中）

　　将须要显示的数据信息利用DAL层以及BLL层写好！例如 DAL层：jquery

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层：ajax

public static List<Student> ClassInfo() { 　　return EchartsService.SelectClassInfo(); }

3、建立控制器Controller，在控制器建立操做方法（这是建立了DAL层与BLL层的控制器代码）根据本身的需求选择控制器Controller中三or四中的代码

　　注意：数据库

　　　　一、建立的操做方法是不能用来生成视图，否则会报错：找不到该资源路径！！！；须要一个HttpGet方法的操做方法来生成视图
　　　　二、操做方法的返回类型是使用JsonResult，而不是ActionResult，而且返回的数据是Jsonjson

[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根据本身的须要自行设定。服务器

　　视图界面代码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 (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

　　柱状图效果图：