Skip to content

P
pica.cloud.web-education-admin
提交 d7d9a143 编写于 作者: zhentian.jia's avatar zhentian.jia
浏览文件
操作

学期报告图表

上级 b44da228
显示空白字符变更
内嵌 并排
正在显示 包含 520 行增加 和 2 行删除
src/views/learning/item-data-all.vue 0 → 100644
浏览文件 @ d7d9a143
<template>
<div class="data-all-wrap">
<div class="chart" id="distributeChart" ref="distributeChart"></div>
<div class="chart" id="recordChart" ref="recordChart"></div>
<div class="chart" id="durationChart" ref="durationChart"></div>
<div class="chart" id="certificateChart" ref="certificateChart"></div>
</div>
</template>
<script>
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
import echarts from "echarts";
import { setTimeout } from "timers";
let vm = null;
export default {
props: {
formInline: {
type: Object
},
activeName: {
type: String
},
organizationNum: {
type: Number
},
organizationList: {
type: Array
}
},
data() {
return {
projectId: "",
echartsData: {
chart0: {},
chart1: {},
chart2: {},
chart3: {},
}
};
},
created() {
vm = this;
vm.projectId = vm.getUrlSearch(window.location.href, "id");
setTimeout(function() {
vm.setDistributeChart();
vm.setRecordChart();
vm.setDurationChart();
vm.setCertificateChart();
}, 20);
},
mounted: function() {},
methods: {
updateResize() {
this.$nextTick(function() {
window.onresize = function() {
vm.echartsData.chart0.resize();
vm.echartsData.chart1.resize();
vm.echartsData.chart2.resize();
vm.echartsData.chart3.resize();
};
});
},
setDistributeChart() {
let myChart = echarts.init(this.$refs.distributeChart);
let option = {
title: {
text: "证书分布情况",
x: "left"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "horizontal",
top: "",
data: ["未获证人数占比", "获优秀人数占比", "获及格人数占比"]
},
series: [
{
name: "访问来源",
type: "pie",
radius: "60%",
center: ["50%", "50%"],
data: [
{ value: 2200, name: "未获证人数占比" },
{ value: 1900, name: "获优秀人数占比" },
{ value: 1500, name: "获及格人数占比" },
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
};
myChart.setOption(option);
vm.echartsData.chart0 = myChart;
vm.updateResize();
},
setRecordChart() {
let myChart = echarts.init(this.$refs.recordChart);
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function(params) {
let relVal = params[0].name + "人数：";
let value = 0;
for (let i = 0, l = params.length; i < l; i++) {
value += params[i].value;
}
relVal += value + "人";
for (let j = 0, l = params.length; j < l; j++) {
relVal +=
"<br/>" +
params[j].seriesName +
"占比： " +
(
(100 * parseFloat(params[j].value)) /
parseFloat(value)
).toFixed(2) +
"%";
}
return relVal;
}
},
legend: {
data: ["未获证人数", "获优秀人数", "获及格人数"]
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
data: ["博士", "硕士", "本科", "大专", "中专及以下", "其他"]
},
yAxis: {
type: "value",
name: "人数 (个)"
},
series: [
{
name: "未获证人数",
type: "bar",
stack: "总量",
barWidth: 30,
label: {
normal: {
show: true,
position: "insideRight"
}
},
data: [1, 302, 301, 334, 390, 330]
},
{
name: "获优秀人数",
type: "bar",
stack: "总量",
label: {
normal: {
show: true,
position: "insideRight"
}
},
data: [120, 132, 101, 134, 90, 230]
},
{
name: "获及格人数",
type: "bar",
stack: "总量",
label: {
normal: {
show: true,
position: "insideRight"
}
},
data: [220, 182, 191, 234, 290, 330]
}
]
};
myChart.setOption(option);
vm.echartsData.chart1 = myChart;
vm.updateResize();
},
setDurationChart() {
let myChart = echarts.init(this.$refs.durationChart);
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
dataZoom: {
show: true,
start: 0,
end: 30
},
xAxis: [
{
axisLabel: {
interval: 0,
rotate: 45
},
type: "category",
data: [
"北京市",
"天津市",
"河北省",
"山西省",
"内蒙古自治区",
"辽宁省",
"吉林省",
"黑龙江省",
"上海市",
"江苏省",
"浙江省",
"安徽省",
"福建省",
"江西省",
"山东省",
"河南省",
"湖北省",
"湖南省",
"广东省",
"广西壮族自治区",
"海南省",
"重庆市",
"四川省",
"贵州省",
"云南省",
"西藏自治区",
"陕西省",
"甘肃省",
"青海省",
"宁夏回族自治区",
"新疆维吾尔自治区"
],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: "value",
name: "完成时长 (天)"
}
],
series: [
{
name: "时长",
type: "bar",
barWidth: "60%",
data: [
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390
],
label: {
show: true,
position: "top",
formatter: "{c}" //这是关键，在需要的地方加上就行了
}
}
]
};
myChart.setOption(option);
vm.echartsData.chart2 = myChart;
vm.updateResize();
},
setCertificateChart() {
let myChart = echarts.init(this.$refs.certificateChart);
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999"
}
},
formatter: function(params) {
let relVal = "";
for (let j = 0, l = params.length; j < l; j++) {
relVal += params[j].seriesName + "： " + params[j].value;
if (j === 2) {
relVal += "%";
} else {
relVal += "<br/>";
}
}
return relVal;
}
},
dataZoom: {
show: true,
start: 0,
end: 30
},
legend: {
data: ["参与人数", "完成人数", "完成比例"]
},
xAxis: [
{
axisLabel: {
interval: 0,
rotate: 45
},
type: "category",
data: [
"北京市",
"天津市",
"河北省",
"山西省",
"内蒙古自治区",
"辽宁省",
"吉林省",
"黑龙江省",
"上海市",
"江苏省",
"浙江省",
"安徽省",
"福建省",
"江西省",
"山东省",
"河南省",
"湖北省",
"湖南省",
"广东省",
"广西壮族自治区",
"海南省",
"重庆市",
"四川省",
"贵州省",
"云南省",
"西藏自治区",
"陕西省",
"甘肃省",
"青海省",
"宁夏回族自治区",
"新疆维吾尔自治区"
],
axisPointer: {
type: "shadow"
}
}
],
yAxis: [
{
type: "value",
name: "人数",
axisLabel: {
formatter: "{value} "
}
},
{
type: "value",
name: "比例",
min: 0,
max: 100,
axisLabel: {
formatter: "{value} %"
}
}
],
series: [
{
name: "参与人数",
type: "bar",
data: [
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390,
330,
220,
10,
52,
200,
334,
390
],
label: {
show: true,
position: "top",
formatter: "{c}" //这是关键，在需要的地方加上就行了
}
},
{
name: "完成人数",
type: "bar",
data: [9, 8, 100, 200, 200, 55, 10],
label: {
show: true,
position: "top",
formatter: "{c}" //这是关键，在需要的地方加上就行了
}
},
{
name: "完成比例",
type: "line",
yAxisIndex: 1,
data: [2, 22, 32, 41, 61, 10, 20, 23, 55, 67, 91, 6],
label: {
show: true,
position: "top",
formatter: "{c}%" //这是关键，在需要的地方加上就行了
}
}
]
};
myChart.setOption(option);
vm.echartsData.chart3 = myChart;
vm.updateResize();
}
}
};
</script>
<style lang="scss">
.data-all-wrap {
background: #fff;
overflow: hidden;
padding: 10px;
.chart {
position: relative;
margin: 20px auto 0 auto;
width: 100%;
height: 350px;
border: 1px solid #dedede;
}
}
</style>
\ No newline at end of file
src/views/learning/item-list.vue
浏览文件 @ d7d9a143
......@@ -97,6 +97,15 @@
:organizationList="organizationList"
></examination-analysisfrom>
</el-tab-pane>
<el-tab-pane label="数据总览" name="fifth">
<data-all
ref="childDataAll"
:formInline="formInline"
:activeName="activeName"
:organizationNum="organizationNum"
:organizationList="organizationList"
></data-all>
</el-tab-pane>
<!-- <el-tab-pane label="学习效果分析" name="fifth" lazy>
<learning-effect></learning-effect>
</el-tab-pane>-->
......@@ -130,6 +139,7 @@ import PartIn from "./item-part-in.vue";
import ExaminationAnalysisfrom from "./item-examination-analysis.vue";
import LearningEffect from "./item-learning-effect.vue";
import DataAlignment from "./data-alignment.vue";
import DataAll from "./item-data-all.vue";
import { create } from "domain";
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils";
......@@ -146,7 +156,8 @@ export default {
PartIn,
ExaminationAnalysisfrom,
LearningEffect,
DataAlignment
DataAlignment,
DataAll,
},
data() {
return {
......@@ -212,7 +223,7 @@ export default {
// organizationData: "",
},
tags: [],
activeName: "first",
activeName: "fifth",
organizationNum: 0,
dialogVisible: false,
dialogUpdate: false,
......@@ -387,6 +398,11 @@ export default {
openLoading(vm);
vm.GET("basic-data/position/provinces", req).then(res => {
closeLoading(vm);
// let list = [];
// for(let i =0;i<res.data.provinceList.length;i++) {
// list[i] = res.data.provinceList[i].provinceName;
// }
// console.log(list);
if (res.code == "000000") {
this.optionsRegion = operationData.setRegionOption(
res.data.provinceList
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或