Skip to content

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

空态数据图表展示方式

上级 7efc89f9
隐藏空白字符变更
内嵌 并排
正在显示 包含 222 行增加 和 92 行删除
src/style/common.scss
浏览文件 @ 4512573f
......@@ -254,3 +254,15 @@ html,body{
color: #FF9A4B;
}
}
.empty-img {
position: relative;
height: 100px;
width: 100%;
display: flex;
img {
position: relative;
margin: 38px auto;
height: 24px;
width: 106px;
}
}
\ No newline at end of file
src/utils/operation.js
浏览文件 @ 4512573f
......@@ -376,7 +376,14 @@ export function getPicOption(title, legendData, colorData, seriesData) {
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
// formatter: "{a} <br/>{b} : {c} ({d}%)"
formatter:function(data){
let value = data.name + '：' + data.percent.toFixed(1)+"%"
return value;
}
},
label: {
formatter:function(data){ return data.percent.toFixed(1)+"%";}
},
legend: {
orient: "vertical",
......
src/views/learning/item-crowd-analysis.vue
浏览文件 @ 4512573f
......@@ -9,8 +9,12 @@
<p>"没有相关数据，请重新选择查询范围"</p>
</div>
<div class="chart" v-show="showData">
<div class="item" id="education" ref="education"></div>
<div class="item item-right" id="job" ref="job"></div>
<div >
<div class="item" id="education" ref="education"></div>
</div>
<div >
<div class="item item-right" id="job" ref="job"></div>
</div>
</div>
<div class="chart" v-show="showData">
<div class="item">
......@@ -254,7 +258,6 @@ export default {
},
educationDivision(data) {
// console.log('this.$refs.education',this.$refs.education)
let myChart = echarts.init(this.$refs.education);
let educationList = data;
let legendData = [];
let seriesData = [];
......@@ -270,12 +273,13 @@ export default {
colorData,
seriesData
);
myChart.setOption(option);
vm.echartsData.chart1 = myChart;
vm.updateResize();
setTimeout(function(){
let myChart = echarts.init(vm.$refs.education);
myChart.setOption(option);
vm.echartsData.chart1 = myChart;
},20);
},
jobDivision(data) {
let myChart2 = echarts.init(this.$refs.job);
let titleList = data;
let legendData = [];
let seriesData = [];
......@@ -290,12 +294,13 @@ export default {
colorData,
seriesData
);
myChart2.setOption(option);
vm.echartsData.chart2 = myChart2;
vm.updateResize();
setTimeout(function(){
let myChart2 = echarts.init(vm.$refs.job);
myChart2.setOption(option);
vm.echartsData.chart2 = myChart2;
},20);
},
ageDivision(data) {
let myChart3 = echarts.init(this.$refs.age);
let xAxisData = [];
let seriesData = [];
let ageList = data;
......@@ -313,9 +318,11 @@ export default {
}
let option = operationData.getBarOption(xAxisData, seriesData);
myChart3.setOption(option);
vm.echartsData.chart3 = myChart3;
vm.updateResize();
setTimeout(function(){
let myChart3 = echarts.init(vm.$refs.age);
myChart3.setOption(option);
vm.echartsData.chart3 = myChart3;
},20);
}
}
};
......
src/views/learning/item-data-all.vue
浏览文件 @ 4512573f
......@@ -65,20 +65,23 @@
</div>
</div>
<div v-if="downloadId == null">
<div class="spacing"></div>
<div class="chart-title">证历分布情况</div>
<div class="chart-distributeChart">
<div class="distributeChart" id="distributeChart" ref="distributeChart"></div>
<div class="data-text">
<div class="content-text">
<p v-for="item in distributeList" >{{item.label}}：{{item.value}}人</p>
<div class="spacing"></div>
<div class="chart-title">证历分布情况</div>
<div v-if="showDistributeChart === true" class="chart-distributeChart">
<div class="distributeChart" id="distributeChart" ref="distributeChart"></div>
<div class="data-text">
<div class="content-text">
<p v-for="item in distributeList" >{{item.label}}：{{item.value}}人</p>
</div>
</div>
</div>
</div>
<div v-if="showDistributeChart === false" class="empty-img">
<img src="../../assets/image/noData.png" />
</div>
</div>
<div class="spacing"></div>
<div class="chart-title">证书级别按学历发布情况</div>
<div class="chart-recordChart">
<div v-if="showRecordChart === true" class="chart-recordChart">
<div class="recordChart" id="recordChart" ref="recordChart"></div>
<div class="data-text">
<div class="content-text">
......@@ -86,21 +89,34 @@
</div>
</div>
</div>
<div v-if="certFlag != 0">
<div class="spacing"></div>
<div class="chart-title-more">
<p>项目排名情况</p>
<el-radio-group class="rank-radio" size="medium" v-model="rankType" @change="changeRank">
<el-radio-button label="1">按获证人数排名</el-radio-button>
<el-radio-button label="2">按获证比例排名</el-radio-button>
<el-radio-button label="3">按参与人数排名</el-radio-button>
</el-radio-group>
<div v-if="showRecordChart === false" class="empty-img">
<img src="../../assets/image/noData.png" />
</div>
<div class="chartCert" id="certificateChart" ref="certificateChart"></div>
<div class="spacing"></div>
<div class="chart-title">在线培训完成时长情况</div>
<div class="chartDuration" id="durationChart" ref="durationChart"></div>
<div class="chart-remarks">注：在线培训完成时长=完成项目时间-开始参与项目时间</div>
<div v-if="certFlag != 0">
<div class="spacing"></div>
<div class="chart-title-more">
<p>项目排名情况</p>
<el-radio-group v-if="showCertificateChart === true" class="rank-radio" size="medium" v-model="rankType" @change="changeRank">
<el-radio-button label="1">按获证人数排名</el-radio-button>
<el-radio-button label="2">按获证比例排名</el-radio-button>
<el-radio-button label="3">按参与人数排名</el-radio-button>
</el-radio-group>
</div>
<div v-if="showCertificateChart === true">
<div class="chartCert" id="certificateChart" ref="certificateChart"></div>
</div>
<div v-if="showCertificateChart === false" class="empty-img">
<img src="../../assets/image/noData.png" />
</div>
<div class="spacing"></div>
<div class="chart-title">在线培训完成时长情况</div>
<div v-if="showDurationChart === true">
<div class="chartDuration" id="durationChart" ref="durationChart"></div>
</div>
<div v-if="showDurationChart === false" class="empty-img">
<img src="../../assets/image/noData.png" />
</div>
<div class="chart-remarks">注：在线培训完成时长=完成项目时间-开始参与项目时间</div>
</div>
</div>
<div v-if="dataType == 1" class="data-table">
......@@ -302,6 +318,11 @@ export default {
certFlag: 0,
downloadId: null,
timeInfoChild: {},
showDistributeChart: true,
showRecordChart: true,
showCertificateChart: true,
showDurationChart: true,
};
},
watch: {
......@@ -612,6 +633,12 @@ export default {
// },100);
},
setDistributeChart(data) {
if(data.length == 0) {
vm.showDistributeChart = false;
return;
} else {
vm.showDistributeChart = true;
}
let keyName = ['未获证人数','优秀人数','良好人数','及格人数','不及格人数'];
let keyName2 = ['未获证人数占比','优秀人数占比','良好人数占比','及格人数占比','不及格人数占比'];
let distributeList = [];
......@@ -632,13 +659,21 @@ export default {
seriesData.push(objSer);
}
vm.distributeList = distributeList;
let myChart = echarts.init(this.$refs.distributeChart);
let option = chartData.dustributeOption(legendData,seriesData);
myChart.setOption(option);
vm.echartsData.chart0 = myChart;
vm.updateResize();
setTimeout(function(){
let myChart = echarts.init(vm.$refs.distributeChart);
let option = chartData.dustributeOption(legendData,seriesData);
myChart.setOption(option);
vm.echartsData.chart0 = myChart;
vm.updateResize();
},20);
},
setRecordChart(data) {
if(data.length == 0) {
vm.showRecordChart = false;
return;
} else {
vm.showRecordChart = true;
}
let recordList = [
{
label: '博士后',
......@@ -711,12 +746,13 @@ export default {
}
// console.log('data',legendData,seriesArr,seriesData);
vm.recordList = recordList;
let myChart = echarts.init(this.$refs.recordChart);
let option = chartData.recordOption(legendData, xAxisData, seriesData);
myChart.setOption(option);
vm.echartsData.chart1 = myChart;
vm.updateResize();
setTimeout(function(){
let myChart = echarts.init(vm.$refs.recordChart);
let option = chartData.recordOption(legendData, xAxisData, seriesData);
myChart.setOption(option);
vm.echartsData.chart1 = myChart;
vm.updateResize();
},20);
},
changeRank(value) {
if(vm.downloadId == null) {
......@@ -743,6 +779,12 @@ export default {
}
},
setCertificateChart(data) {
if(data.length == 0) {
vm.showCertificateChart = false;
return;
} else {
vm.showCertificateChart = true;
}
let xAxisData = [];
let seriesJoin = [];
let seriesCert = [];
......@@ -753,24 +795,34 @@ export default {
seriesCert.push(data[i].certCount);
seriesRate.push(data[i].certRate);
}
let myChart = echarts.init(this.$refs.certificateChart);
let option = chartData.certificateOption(xAxisData, seriesJoin, seriesCert, seriesRate);
myChart.setOption(option);
vm.echartsData.chart2 = myChart;
vm.updateResize();
setTimeout(function(){
let myChart = echarts.init(vm.$refs.certificateChart);
let option = chartData.certificateOption(xAxisData, seriesJoin, seriesCert, seriesRate);
myChart.setOption(option);
vm.echartsData.chart2 = myChart;
vm.updateResize();
},20);
},
setDurationChart(data) {
if(data.length == 0) {
vm.showDurationChart = false;
return;
} else {
vm.showDurationChart = true;
}
let xAxisData = [];
let seriesData = [];
for(let i = 0 ; i<data.length ; i++) {
xAxisData.push(data[i].subName);
seriesData.push(data[i].costTime);
}
let myChart = echarts.init(this.$refs.durationChart);
let option = chartData.durationOption(xAxisData, seriesData);
myChart.setOption(option);
vm.echartsData.chart3 = myChart;
vm.updateResize();
setTimeout(function(){
let myChart = echarts.init(vm.$refs.durationChart);
let option = chartData.durationOption(xAxisData, seriesData);
myChart.setOption(option);
vm.echartsData.chart3 = myChart;
vm.updateResize();
},20);
},
//日周月年分页
handleSizeDwmy(val) {
......
src/views/learning/item-examination-analysis.vue
浏览文件 @ 4512573f
......@@ -10,19 +10,29 @@
</div>
<div class="spacing"></div>
<div class="chart-title">完成项目考试次数情况</div>
<div class="chart" id="examTimes" ref="examTimes"></div>
<div v-if="showExamTimes === true" >
<div class="chart" id="examTimes" ref="examTimes"></div>
</div>
<div v-if="showExamTimes === false" class="empty-img">
<img src="../../assets/image/noData.png" />
</div>
<div class="chart-remarks">注：本报表数据来源包括用户参加正式考试次数，不包含摸底考试次数。</div>
<div class="spacing"></div>
<!-- <div class="chart-title">完成项目考试分数情况</div> -->
<div class="chart-title-more">
<p>完成项目考试分数情况</p>
<el-radio-group class="rank-radio" size="medium" v-model="rankType" @change="changeRank">
<el-radio-group v-if="showExamScore === true" class="rank-radio" size="medium" v-model="rankType" @change="changeRank">
<el-radio-button label="1">1分</el-radio-button>
<el-radio-button label="5">5分</el-radio-button>
<el-radio-button label="10">10分</el-radio-button>
</el-radio-group>
</div>
<div class="chart" id="examScore" ref="examScore"></div>
<div v-if="showExamScore === true">
<div class="chart" id="examScore" ref="examScore"></div>
</div>
<div v-if="showExamScore === false" class="empty-img">
<img src="../../assets/image/noData.png" />
</div>
<div class="chart-remarks">注：本报表数据来源包括用户参加正式考试，不包含摸底考试。</div>
<div class="spacing"></div>
<div v-if="downloadId == null">
......@@ -135,6 +145,8 @@ export default {
rankType: '1',
timeInfoChild: {},
downloadId: null,
showExamTimes: true,
showExamScore: true,
};
},
watch: {
......@@ -276,17 +288,24 @@ export default {
}, 30);
},
setExamTimes(data) {
let myChart = echarts.init(this.$refs.examTimes);
if(data.length == 0) {
vm.showExamTimes = false;
return;
} else {
vm.showExamTimes = true;
}
let xAxisData = [];
let seriesData = [];
for (let i = 0; i < data.length; i++) {
xAxisData.push(data[i].times + "次");
seriesData.push(data[i].count);
}
let option = chartData.examTimes(xAxisData, seriesData);
myChart.setOption(option);
vm.echartsData.chart0 = myChart;
vm.updateResize();
setTimeout(function(){
let myChart = echarts.init(vm.$refs.examTimes);
let option = chartData.examTimes(xAxisData, seriesData);
myChart.setOption(option);
vm.echartsData.chart0 = myChart;
},20);
},
changeRank(value) {
console.log(value);
......@@ -310,17 +329,24 @@ export default {
}
},
setExamScore(data) {
let myChart = echarts.init(this.$refs.examScore);
if(data.length == 0) {
vm.showExamScore = false;
return;
} else {
vm.showExamScore = true;
}
let xAxisData = [];
let seriesData = [];
for (let i = 0; i < data.length; i++) {
xAxisData.push(data[i].timesStr);
seriesData.push(data[i].count);
}
let option = chartData.examScore(xAxisData, seriesData);
myChart.setOption(option);
vm.echartsData.chart1 = myChart;
vm.updateResize();
setTimeout(function(){
let myChart = echarts.init(vm.$refs.examScore);
let option = chartData.examScore(xAxisData, seriesData);
myChart.setOption(option);
vm.echartsData.chart1 = myChart;
},20);
},
// 跳转查看名单页面
goPage(data) {
......
src/views/learning/item-learning-effect.vue
浏览文件 @ 4512573f
......@@ -9,12 +9,22 @@
</div>
</div>
<div class="spacing"></div>
<div class="chart-title">不同学历完成项目前后正确率对比</div>
<div class="chartEdu" ref="education"></div>
<div class="chart-title">不同学历完成项目前后正确率对比</div>
<div v-if="showChartEdu === true">
<div class="chartEdu" ref="education"></div>
</div>
<div v-if="showChartEdu === false" class="empty-img">
<img src="../../assets/image/noData.png" />
</div>
<div class="chart-remarks">注：本报表数据来源仅仅统计同时包含摸底考和正式考的课程培训。</div>
<div class="spacing"></div>
<div class="chart-title">培训前后知识点掌握情况</div>
<div class="chartLearn" ref="learning"></div>
<div v-if="showChartLearn === true">
<div class="chartLearn" ref="learning"></div>
</div>
<div v-if="showChartLearn === false" class="empty-img">
<img src="../../assets/image/noData.png" />
</div>
<div class="chart-remarks">注：本报表数据来源仅包括有摸底考的课程培训。</div>
</div>
</template>
......@@ -46,6 +56,8 @@ export default {
chart2: {}
},
timeInfoChild: {},
showChartEdu: true,
showChartLearn: true,
};
},
watch: {
......@@ -121,39 +133,53 @@ export default {
title: "培训前后正确率"
}
];
cardData[0].value = (data.beforeRate*100).toFixed(2) + "%";
cardData[1].value = (data.afterRate*100).toFixed(2) + "%";
cardData[0].value = (data.beforeRate*100).toFixed(1) + "%";
cardData[1].value = (data.afterRate*100).toFixed(1) + "%";
vm.cardData = cardData;
},
setEducation(data) {
let myChart = echarts.init(this.$refs.education);
if(data.length == 0) {
vm.showChartEdu = false;
return;
} else {
vm.showChartEdu = true;
}
let xAxisData = [];
let seriesBefore = [];
let seriesAfter = [];
for(let i = 0; i < data.length ; i++) {
xAxisData.push(data[i].classifyName);
seriesBefore.push((data[i].beforeRate*100).toFixed(2));
seriesAfter.push((data[i].afterRate*100).toFixed(2));
seriesBefore.push((data[i].beforeRate*100).toFixed(1));
seriesAfter.push((data[i].afterRate*100).toFixed(1));
}
let option = chartData.educationEffect(xAxisData, seriesBefore ,seriesAfter);
myChart.setOption(option);
vm.echartsData.chart1 = myChart;
vm.updateResize();
setTimeout(function(){
let myChart = echarts.init(vm.$refs.education);
let option = chartData.educationEffect(xAxisData, seriesBefore ,seriesAfter);
myChart.setOption(option);
vm.echartsData.chart1 = myChart;
},20);
},
setLearning(data) {
let myChart = echarts.init(this.$refs.learning);
if(data.length == 0) {
vm.showChartLearn = false;
return;
} else {
vm.showChartLearn = true;
}
let xAxisData = [];
let seriesBefore = [];
let seriesAfter = [];
for(let i = 0; i < data.length ; i++) {
xAxisData.push(data[i].classifyName);
seriesBefore.push((data[i].beforeRate*100).toFixed(2));
seriesAfter.push((data[i].afterRate*100).toFixed(2));
seriesBefore.push((data[i].beforeRate*100).toFixed(1));
seriesAfter.push((data[i].afterRate*100).toFixed(1));
}
let option = chartData.knowledgeEffect(xAxisData, seriesBefore ,seriesAfter);
myChart.setOption(option);
vm.echartsData.chart2 = myChart;
vm.updateResize();
setTimeout(function(){
let myChart = echarts.init(vm.$refs.learning);
let option = chartData.knowledgeEffect(xAxisData, seriesBefore ,seriesAfter);
myChart.setOption(option);
vm.echartsData.chart2 = myChart;
},20);
}
}
};
......
src/views/learning/item-list.vue
浏览文件 @ 4512573f
......@@ -284,7 +284,7 @@ export default {
// organizationData: "",
},
tags: [],
activeName: "zero",
activeName: "fifth",
organizationNum: 0,
dialogVisible: false,
dialogUpdate: false,
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或