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="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

 

 

  柱状图效果图:

 

 


  饼状图效果图:

posted @ 2020-06-18 15:42  TomLucas  阅读(333)  评论(0编辑  收藏