饼状图
饼状图
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Adobe JavaScript
作者：陈钰桃
撰写时间：2020年9月28日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
成果图
一、HTML
按钮
<div class="row mt-2">
<div class="col-auto mt-2 mt-lg-0">
<button class="btn btn-outline-primary" type="button" οnclick="createChart()">查询</button>
</div>
</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>
<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;
createChart();
});
基于准备好的dom, 初始化echarts实例
myBarChart = echarts.init(document.getElementById('myBarChart'), 'wonderland');
});
窗口大小改变时，重新设置echarts图表的大小
$(window).resize(function () {
myBarChart.resize();
});
按钮点击事件
function createChart() {
获取参数
var academeID = $("#searchAcademeID").val();
var specialtyID = $("#searchSpecialtyID").val();
var gradeID = $("#searchGradeID").val();
var classID = $("#searchClassID").val();
刷新
var layerIndex = layer.load();
请求数据
$.post("@Url.Content("~/StatistiscalChart/Pie/GetPieChartData")",
{
academeID: academeID,
specialtyID: specialtyID,
gradeID: gradeID,
classID: classID,
},
function (jsonData) {
layer.close(layerIndex);
指定图表的配置项和数据
var option = {
title: {
text: jsonData.title,
subtext: '副标题',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: jsonData.legendData
},
series: [
{
name: '学生人数',
type: 'pie', //指定饼状图
//radius: '70%', //指定圆的半径
radius: ['50%', '70%'], //[内部空白圆的半径，外部圆的半径]
center: ['50%', '50%'], //指定圆心的位置
data: jsonData.chartData
}
]
};
使用刚指定的配置项和数据显示图表。
myBarChart.setOption(option);
});
}
三、控制器
public ActionResult GetPieChartData(int? academeID,int? specialtyID,int? gradeID,int? classID)
{
统计[学院][-专业][-年级][-班级]的学生男女比例
string title = "全校";
var queryStudent = from tabStudent in myModel.SYS_Student
select tabStudent;
if (academeID != null && academeID > 0)
{
queryStudent = queryStudent.Where(o => o.academeID == academeID);
title = myModel.SYS_Academe.Single(o => o.academeID == academeID).academeName;
}
if (specialtyID != null && specialtyID > 0)
{
queryStudent = queryStudent.Where(o => o.specialtyID == specialtyID);
title += "-" + myModel.SYS_Specialty.Single(o => o.specialtyID == specialtyID).specialtyName;
}
if (gradeID != null && gradeID > 0)
{
queryStudent = queryStudent.Where(o => o.gradeID == gradeID);
title += "-" + myModel.SYS_Grade.Single(o => o.gradeID == gradeID).gradeName;
}
if (classID != null && classID > 0)
{
queryStudent = queryStudent.Where(o => o.classID == classID);
title += "-" + myModel.SYS_Class.Single(o => o.classID == classID).className;
}
title += "学生的男女比例";
var chartData = (from tabStudent in queryStudent
group tabStudent by tabStudent.studentSex
into tabTemp
select new
{
name = tabTemp.Key, //分组的key -- 学生性别
value = tabTemp.Count(), //各个组的学生人数
}).ToList();
List<string> legendData = chartData.Select(o => o.name).ToList();
return Json(new { title, chartData, legendData });
}
}