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根据自己的需要自行设定。

　　视图界面代码：

@{
    ViewBag.Title = "Home Page";
}
@* 男女生人数柱状图 *@
<div id="main" style=" 500px; height:400px"></div>
@* 男女生人数饼状图 *@
<div id="Pie" style=" 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

　　柱状图效果图：

　　饼状图效果图：