柱状图 与 折线图
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：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();