柱状图

柱状图 与 折线图

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Adobe JavaScript

作者：陈钰桃

撰写时间：2020年9月25日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

成果图

一、HTML

按钮

<div class="col-auto mt-2 mt-lg-0">

    <button class="btn btn-outline-primary" type="button" οnclick="createChart()">生成图表</button>

</div>

图表部分

<div class="row">

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

<div id="myBarChart" class="col" style="height:400px;"></div>

</div>

引入echarts的js

<script src="~/Content/incubator-echarts-4.9.0/dist/echarts.js"></script>

图表主题（一般引入自己需要的那个主题就可以了，避免占用内存）

<script src="~/Content/incubator-echarts-4.9.0/theme/tech-blue.js"></script>

<script src="~/Content/incubator-echarts-4.9.0/theme/vintage.js"></script>

可以进行自定义图表主题 在 echarts 官网上设置主题 进行下载

<script src="~/Content/incubator-echarts-4.9.0/theme/wonderland.js"></script>

 

二、SCRIPT

var layer;

var myBarChart;

 

$(function () {

   //layui

     layui.use(['layer', 'table'], function () {

     layer = layui.layer;

  });

1. 基于准备好的dom，初始化echarts实例

myBarChart = echarts.init(document.getElementById('myBarChart')/*, 'dark'*//*, 'tech-blue'*/, 'wonderland'); 

图表背景默认白色， dark--设置为黑色  tech-blue--图表主题的改变   wonderland--自定义图表主题

});

2. 窗口大小改变时 重新设置echart图表的大小

  $(window).resize(function () {

       myBarChart.resize();

});

3. 生成图表

3.1 按钮点击事件

function createChart() {

获取参数  判断

     var academeID = $("#searchAcademeID").val();

     if (academeID == undefined || academeID == "" || isNaN(academeID) || academeID == 0) {

          layer.alert("请选择学院");

          return;

     }

     var specialtyID = $("#searchSpecialtyID").val();

     if (specialtyID == undefined || specialtyID == "" || isNaN(specialtyID) || specialtyID == 0) {

           layer.alert("请选择专业");

           return;

     }

     var gradeID = $("#searchGradeID").val();

     if (gradeID == undefined || gradeID == "" || isNaN(gradeID) || gradeID == 0) {

          layer.alert("请选择年级");

          return;

}

刷新表格

var layerIndex = layer.load();

3.2 提交请求数据

    $.post("@Url.Content("~/StatistiscalChart/BarChart/GetBarChartData")",

                {

                    academeID: academeID,

                    specialtyID: specialtyID,

                    gradeID: gradeID

               },

function (jsonData) {

                    layer.close(layerIndex);

                    3.3 指定图表的配置项和数据

                    var option = {

                        title: {//标题

                            text: jsonData.text/* + '\n' + '换行了'*/,   // +'\n'+'--标题文本进行换行

                            textStyle: {

                                color:'#ff0000'

                            },  //设置标题文本颜色

                         },

                        tooltip: {//提示框（提示工具条）

                            show: true,  //  true--显示提示工具条   false--关闭提示工具条

                            trigger: 'axis'

                            //与show搭配使用 -- 在...情况下触发工具条显示

                            //参数  

                            //item   数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用

                            //axis   坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用

                            //none   什么都不触发

                        },

                        legend: {//图例  可以通过点击图例控制哪些系列不显示

                            data: ['学生人数', '学生人数1'], //图例要和数据对应

                            type: 'scroll',

                            top: '30'  //图例组件离容器上侧的距离  top值可以为top,middle,bottom  也可以为 20  20% 这样的具体像素值

                            //type 当图例数量过多时，可以使用滚动图例（垂直）或滚动图例（水平）

                            //参数

                            //plain  默认普通图例。缺省就是普通图例

                            //scroll 可滚动翻页的图例。当图例数量较多时可以使用

                        },

                        xAxis: { //x轴 坐标数据

                            data: jsonData.classNames,

                        },

                        yAxis: {},

                        series: [{//相关数据和图表类型，显示设置

                            name: '学生人数',

                            type: 'bar',//指定图表类型

                            data: jsonData.classStudentNum,

                            label: {

                                show: true,

                                position: 'insideTop',

                                rotate: 90,

                                formatter:'{a} {b}-{c}人'

                            }

                        },

                        {//相关数据和图表类型，显示设置

                            name: '学生人数1',

                            type: 'bar',//指定图表类型

                            data: jsonData.classStudentNum,

                            label: { //是否在环形柱条两侧使用圆弧效果，仅对极坐标系柱状图有效

                                show: true,  //是否显示标签

                                position: 'insideTop',  // position 标签的位置  top顶部  加上inside的表示内部 如：insideTop--内部的顶部

                                rotate: 90,   //标签旋转。从-90度到90度。正值是逆时针

                                formatter: '{a} {b} {c}'  //字符串  参数（模板）{a}:系统名--name  {b}:数据名--x轴坐标名称  {c}:数据值--人数(数量)

                            }

                        }]

                    };

                    // 使用刚指定的配置项和数据显示图表。

                    myBarChart.setOption(option);

                });

        }

 

三、控制器

public ActionResult GetBarChartData(int? academeID, int? specialtyID, int? gradeID)

{

     本次统计目标  学院-专业-年级 下各个班级的学生人数

     List<ClassVo> listClass = (from tabClass in myModel.SYS_Class

                                where tabClass.academeID == academeID &&

                                      tabClass.specialtyID == specialtyID &&

                                      tabClass.gradeID == gradeID

                                select new ClassVo

                                {

                                    className = tabClass.className,

                                    子查询

                                    studentNum = myModel.SYS_Student

                                    .Count(o => o.classID == tabClass.classID)

                                 }).ToList();

 

            x轴 数据 - 各个班级的名称

            List<string> classNames = listClass.Select(o => o.className).ToList();

            数据

            List<int> classStudentNum = listClass.Select(o => o.studentNum).ToList();

            标题

            string text = "";

            text += myModel.SYS_Academe

                .Where(o => o.academeID == academeID)

                .Select(o => o.academeName)

                .SingleOrDefault();

            text += "-";

            text += myModel.SYS_Specialty

                .Where(o => o.specialtyID == specialtyID)

                .Select(o => o.specialtyName)

                .SingleOrDefault();

            text += "-";

            text += myModel.SYS_Grade

                .Where(o => o.gradeID == gradeID)

                .Select(o => o.gradeName)

                .SingleOrDefault();

            text += "各班人数";

 

            return Json(new { classNames, classStudentNum, text }, JsonRequestBehavior.AllowGet);

        }

 

ClassVo – 新建类 存放查询表里没有但是需要用到的数据

 

注：

折线图与柱状图大致一样

区别在于

折线图Script

type: 'line', //指定图表类型

折线图控制器

需要一个数据分组

  var queryGradeStudent = (from tabStudent in queryStudent

                           group tabStudent by tabStudent.gradeName

                           into tabTemp

                           select new

                           {

                                 gradeName = tabTemp.Key,

                                 studentNum = tabTemp.Count()

                           }).ToList();