Skip to content

P
pica-learning-report
提交 368b0b32 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

解决图表为空的问题

上级 024503d8
隐藏空白字符变更
内嵌 并排
正在显示 包含 247 行增加 和 158 行删除
components/bussiness/charts/chart-column-horizontal-tc-long.vue
浏览文件 @ 368b0b32
......@@ -2,18 +2,21 @@
<template>
<div>
<div class="chart-column-vtc">
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
<div v-show="isShow" :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
<NoContent v-show="!isShow" :id="id" :style="{width: '100%', height: '220px'}"></NoContent>
</div>
<CommonNoMore></CommonNoMore>
<CommonNoMore v-show="isShow"></CommonNoMore>
</div>
</template>
<script>
let vm = null;
import CommonNoMore from "@/components/common/common-no-more";
import NoContent from "@/components/bussiness/no-content";
// let chartColumn = null;
export default {
components: {
CommonNoMore
CommonNoMore,
NoContent
},
props: {
id: {
......@@ -39,32 +42,38 @@ export default {
data() {
return {
chartWidth: "100%",
chartHeight: "200px"
chartHeight: "200px",
isShow: true
};
},
watch: {
dataList: {
handler(newVal) {
let yAxisData = [],
series0Data = [],
series1Data = [];
yAxisData = newVal.map(item => {
return this.shortName(item.classifyName)
});
series0Data = this.dataList.map(item => {
return (item.beforeRate || 0) * 100;
});
series1Data = this.dataList.map(item => {
return (item.afterRate || 0) * 100;
});
if (process.client) {
let clientWidth =
window.outerWidth ||
document.body.clientWidth ||
document.documentElement.clientWidth;
this.chartWidth = clientWidth + "px";
this.chartHeight = 53 * this.dataList.length + "px";
this.drawColumn(yAxisData, series0Data, series1Data);
if(newVal.length) {
this.isShow = true;
let yAxisData = [],
series0Data = [],
series1Data = [];
yAxisData = newVal.map(item => {
return this.shortName(item.classifyName)
});
series0Data = this.dataList.map(item => {
return (item.beforeRate || 0) * 100;
});
series1Data = this.dataList.map(item => {
return (item.afterRate || 0) * 100;
});
if (process.client) {
let clientWidth =
window.outerWidth ||
document.body.clientWidth ||
document.documentElement.clientWidth;
this.chartWidth = clientWidth + "px";
this.chartHeight = 53 * this.dataList.length + "px";
this.drawColumn(yAxisData, series0Data, series1Data);
}
} else {
this.isShow = false;
}
},
deep: true
......@@ -72,10 +81,7 @@ export default {
},
created() {
if (process.client) {
// vm = this;
// this.drawColumn([], [], []);
}
},
mounted() {
vm = this;
......
components/bussiness/charts/chart-column-horizontal-tc.vue
浏览文件 @ 368b0b32
......@@ -2,15 +2,20 @@
<template>
<div>
<div class="chart-column-htc">
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
<div v-show="isShow" :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
<NoContent v-show="!isShow" :id="id" :style="{width: '100%', height: '220px'}"></NoContent>
</div>
</div>
</template>
<script>
import { format } from "path";
import NoContent from "@/components/bussiness/no-content";
let vm = null,
chartColumn = null;
export default {
components: {
NoContent
},
props: {
dataList: {
type: Array,
......@@ -28,31 +33,36 @@ export default {
data() {
return {
chartWidth: "300px",
chartHeight: "350px"
chartHeight: "350px",
isShow: true,
};
},
watch: {
dataList: {
handler(newVal) {
let yAxisData = [],
series0Data = [],
series1Data = [];
yAxisData = newVal.map(item => {
return this.shortName(item.classifyName);
// return (item.classifyName || 0).toFixed(1) * 100 + '%'
});
series0Data = this.dataList.map(item => {
return ((item.beforeRate || 0) * 100).toFixed(1);
});
series1Data = this.dataList.map(item => {
return ((item.afterRate || 0) * 100).toFixed(1);
});
this.drawColumn(
yAxisData.splice(0, 5),
series0Data.splice(0, 5),
series1Data.splice(0, 5)
);
if(newVal.length) {
this.isShow = true;
let yAxisData = [],
series0Data = [],
series1Data = [];
yAxisData = newVal.map(item => {
return this.shortName(item.classifyName);
});
series0Data = this.dataList.map(item => {
return ((item.beforeRate || 0) * 100).toFixed(1);
});
series1Data = this.dataList.map(item => {
return ((item.afterRate || 0) * 100).toFixed(1);
});
this.drawColumn(
yAxisData.splice(0, 5),
series0Data.splice(0, 5),
series1Data.splice(0, 5)
);
} else {
this.isShow = false;
}
},
deep: false
}
......
components/bussiness/charts/chart-column-stack.vue
浏览文件 @ 368b0b32
<!-- 柱状图-横向 -->
<template>
<div class="chart-pie">
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
<div v-show="isShow" :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
<NoContent v-show="!isShow" :id="id" :style="{width: '100%', height: '220px'}"></NoContent>
</div>
</template>
<script>
import { format } from "path";
import NoContent from "@/components/bussiness/no-content";
let vm = null;
let certNameConfig = {
'-1': '未获证人数',
......@@ -15,6 +17,9 @@ let certNameConfig = {
'4': '获不及格人数',
}
export default {
components: {
NoContent
},
props: {
id: {
type: String,
......@@ -42,6 +47,7 @@ export default {
legendData: [],
yAxisData: [],
seriesData: [],
isShow: true
};
},
mounted() {
......@@ -50,61 +56,66 @@ export default {
watch: {
echartsData: {
handler(newVal, oldValue) {
// console.log(newVal, oldValue);
vm.legendData = [];
vm.yAxisData = [];
vm.seriesData = [];
let cData, certList, certLength = 0, certData = [], certId = 0, certName = '其它';
// 将所有证书名称进行修改
for(let i = 0; i < newVal.length; i ++) {
for(let j = 0; j < newVal[i].certList.length; j ++) {
if(vm.certFlag == 1 && newVal[i].certList[j].id != -1) { // 如果是单证书
newVal[i].certList[j].name = '已获证人数'
} else {
newVal[i].certList[j].name = certNameConfig[newVal[i].certList[j].id];
if(newVal.length) {
this.isShow = true;
// console.log(newVal, oldValue);
vm.legendData = [];
vm.yAxisData = [];
vm.seriesData = [];
let cData, certList, certLength = 0, certData = [], certId = 0, certName = '其它';
// 将所有证书名称进行修改
for(let i = 0; i < newVal.length; i ++) {
for(let j = 0; j < newVal[i].certList.length; j ++) {
if(vm.certFlag == 1 && newVal[i].certList[j].id != -1) { // 如果是单证书
newVal[i].certList[j].name = '已获证人数'
} else {
newVal[i].certList[j].name = certNameConfig[newVal[i].certList[j].id];
}
}
}
}
for(let i = 0; i < newVal.length; i ++){
certData = [];
cData = newVal[i];
vm.yAxisData.push(cData.eduName);
// vm.legendData.push(cData.eduName);
certLength = cData.certList.length;
for(let j = 0; j < certLength; j ++) {
certList = cData.certList;
certData.push(certList[j].value);
if(i == 0) {
// certId = certList[j].certId
// if(certId == -1) {
// certName = '未获证人数'
// } else if(certId == 1) {
// certName = '获优秀人数'
// } else if(certId == 2) {
// certName = '获良好人数'
// } else if(certId == 3) {
// certName = '获及格人数'
// } else if(certId == 3) {
// certName = '获不及格人数'
// } else {
// certName = '其它'
// }
vm.legendData.push(certList[j].name);
// vm.yAxisData.push(certList[j].name);
for(let i = 0; i < newVal.length; i ++){
certData = [];
cData = newVal[i];
vm.yAxisData.push(cData.eduName);
// vm.legendData.push(cData.eduName);
certLength = cData.certList.length;
for(let j = 0; j < certLength; j ++) {
certList = cData.certList;
certData.push(certList[j].value);
if(i == 0) {
// certId = certList[j].certId
// if(certId == -1) {
// certName = '未获证人数'
// } else if(certId == 1) {
// certName = '获优秀人数'
// } else if(certId == 2) {
// certName = '获良好人数'
// } else if(certId == 3) {
// certName = '获及格人数'
// } else if(certId == 3) {
// certName = '获不及格人数'
// } else {
// certName = '其它'
// }
vm.legendData.push(certList[j].name);
// vm.yAxisData.push(certList[j].name);
}
}
// vm.seriesData.push({
// name: cData.eduName,
// type: "bar",
// stack: "总量",
// barWidth: 16, //柱图宽度
// data: certData
// });
}
// vm.seriesData.push({
// name: cData.eduName,
// type: "bar",
// stack: "总量",
// barWidth: 16, //柱图宽度
// data: certData
// });
this.handlerSeriesData(newVal);
vm.drawColumn();
} else {
this.isShow = false;
}
this.handlerSeriesData(newVal);
vm.drawColumn();
},
deep: true
}
......
components/bussiness/charts/chart-column-vertical-score.vue
浏览文件 @ 368b0b32
<!-- 柱状图-竖向 -->
<template>
<section class="chart-pie">
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
<div v-show="isShow" :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
<NoContent v-show="!isShow" :id="id" :style="{width: '100%', height: '220px'}"></NoContent>
</section>
</template>
<script>
import { format } from "path";
import NoContent from "@/components/bussiness/no-content";
let vm = null, chartColumn = null;
export default {
components: {
NoContent
},
props: {
id: {
type: String,
......@@ -127,22 +132,27 @@ export default {
barWidth: 20 //柱图宽度
}
]
}
},
isShow: true
};
},
watch: {
dataList: {
handler(newVal) {
// debugger
this.xAxisData = newVal.map( item => {
return item.times
})
this.seriesData = newVal.map( item => {
return item.count
})
this.options.xAxis.data = this.xAxisData;
this.options.series[0].data = this.seriesData;
chartColumn.setOption(this.options, true);
if(newVal.length) {
this.isShow = true;
this.xAxisData = newVal.map( item => {
return item.times
})
this.seriesData = newVal.map( item => {
return item.count
})
this.options.xAxis.data = this.xAxisData;
this.options.series[0].data = this.seriesData;
chartColumn.setOption(this.options, true);
} else {
this.isShow = false;
}
},
deep: true
}
......
components/bussiness/charts/chart-column-vertical-tc.vue
浏览文件 @ 368b0b32
......@@ -2,18 +2,21 @@
<template>
<div>
<div class="chart-column-vtc">
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
<div v-show="isShow" :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
<NoContent v-show="!isShow" :id="id" :style="{width: '100%', height: '220px'}"></NoContent>
</div>
<TipsInfoChart content="报告数据来源仅包含摸底考和正式考的课程培训"></TipsInfoChart>
</div>
</template>
<script>
import { format } from "path";
import NoContent from "@/components/bussiness/no-content";
import TipsInfoChart from "@/components/bussiness/tips-info-chart";
let vm = null, chartColumn = null;
export default {
components: {
TipsInfoChart
TipsInfoChart,
NoContent
},
props: {
dataList: {
......@@ -37,7 +40,8 @@ export default {
data() {
return {
chartWidth: "300px",
chartHeight: "320px"
chartHeight: "320px",
isShow: true,
};
},
created() {
......@@ -53,17 +57,22 @@ export default {
watch: {
dataList: {
handler(newVal) {
let yAxisData = [], series0Data = [], series1Data = []
yAxisData = newVal.map( item => {
return this.shortName(item.classifyName)
})
series0Data = this.dataList.map( item => {
return ((item.beforeRate|| 0) * 100).toFixed(1);
})
series1Data = this.dataList.map( item => {
return ((item.afterRate|| 0) * 100).toFixed(1);
})
this.drawColumn(yAxisData.splice(0, 5), series0Data.splice(0, 5), series1Data.splice(0, 5));
if(newVal.length) {
this.isShow = true;
let yAxisData = [], series0Data = [], series1Data = []
yAxisData = newVal.map( item => {
return this.shortName(item.classifyName)
})
series0Data = this.dataList.map( item => {
return ((item.beforeRate|| 0) * 100).toFixed(1);
})
series1Data = this.dataList.map( item => {
return ((item.afterRate|| 0) * 100).toFixed(1);
})
this.drawColumn(yAxisData.splice(0, 5), series0Data.splice(0, 5), series1Data.splice(0, 5));
} else {
this.isShow = false;
}
},
deep: false
}
......
components/bussiness/charts/chart-column-vertical-times.vue
浏览文件 @ 368b0b32
<!-- 柱状图-竖向 -->
<template>
<section class="chart-pie">
<div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
<div v-show="isShow" :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
<NoContent v-show="!isShow" :id="id" :style="{width: '100%', height: '220px'}"></NoContent>
</section>
</template>
<script>
import { format } from "path";
import NoContent from "@/components/bussiness/no-content";
let vm = null, chartColumn = null;
export default {
components: {
NoContent
},
props: {
id: {
type: String,
......@@ -121,22 +126,30 @@ export default {
barWidth: 20 //柱图宽度
}
]
}
},
isShow: true
};
},
watch: {
dataList: {
handler(newVal) {
let cList = newVal.slice(0, 5);
this.xAxisData = cList.map( item => {
return item.timesStr
})
this.seriesData = cList.map( item => {
return item.count
})
this.options.xAxis.data = this.xAxisData;
this.options.series[0].data = this.seriesData;
chartColumn.setOption(this.options, true);
console.log('chart-cvtimes', newVal)
if(newVal.length) {
this.isShow = true;
let cList = newVal.slice(0, 5);
this.xAxisData = cList.map( item => {
return item.timesStr
})
this.seriesData = cList.map( item => {
return item.count
})
this.options.xAxis.data = this.xAxisData;
this.options.series[0].data = this.seriesData;
chartColumn.setOption(this.options, true);
} else {
this.isShow = false;
}
},
deep: true
}
......
components/bussiness/charts/chart-pie-edu.vue
浏览文件 @ 368b0b32
<!-- 人员学历情况饼图 -->
<template>
<section class="chart-pie-edu">
<div :id="pieId" :style="{width: chartWidth, height: '220px'}"></div>
<div v-show="isShow" :id="pieId" :style="{width: chartWidth, height: '220px'}"></div>
<NoContent v-show="!isShow" :id="pieId" :style="{width: '100%', height: '220px'}"></NoContent>
</section>
</template>
<script>
import { format } from "path";
import { echartColors } from '@/utils/index'
import NoContent from "@/components/bussiness/no-content";
let vm = null;
export default {
name: "eduPie",
components: {
NoContent
},
props: {
dataList: {
type: Array,
......@@ -29,23 +34,28 @@ export default {
handledData: {},
legendData: [],
seriesData: {},
count: 0
count: 0,
isShow: true
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
};
},
watch: {
dataList: {
handler(newValue, oldValue) {
if (process.client) {
if (newValue.length) {
this.isShow = true;
let clientWidth =
window.outerWidth ||
document.body.clientWidth ||
document.documentElement.clientWidth;
this.chartWidth = Math.ceil(clientWidth * 0.90) + 'px';
console.log('this.chartWidth', this.chartWidth);
this.handlePieData(newValue);
this.drawPie();
} else {
this.isShow = false;
}
this.handlePieData(newValue);
this.drawPie();
},
deep: true
}
......
components/bussiness/charts/chart-pie-title.vue
浏览文件 @ 368b0b32
<!-- 人员职称情况饼图 -->
<template>
<section class="chart-pie">
<div :id="pieId" :style="{width: chartWidth, height: '220px'}"></div>
<div v-show="isShow" :id="pieId" :style="{width: chartWidth, height: '220px'}"></div>
<NoContent v-show="!isShow" :id="pieId" :style="{width: '100%', height: '220px'}"></NoContent>
</section>
</template>
<script>
import { format } from "path";
import { echartColors } from "@/utils/index";
import NoContent from "@/components/bussiness/no-content";
let vm = null;
export default {
name: "titlePie",
components: {
NoContent
},
props: {
pieData: {
type: Array,
......@@ -26,7 +31,7 @@ export default {
{ value: 310, name: "及格证书" },
{ value: 234, name: "未获证" }
]
}
},
},
data() {
return {
......@@ -36,14 +41,16 @@ export default {
handledData: {},
legendData: [],
seriesData: {},
count: 0
count: 0,
isShow: true,
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
};
},
watch: {
dataList: {
handler(newValue, oldValue) {
if (process.client) {
if (newValue.length) {
this.isShow = true;
let clientWidth =
window.outerWidth ||
document.body.clientWidth ||
......@@ -52,6 +59,8 @@ export default {
console.log('this.chartWidth', this.chartWidth);
this.handlePieData(newValue);
this.drawPie();
} else {
this.isShow = false;
}
},
deep: true
......
components/bussiness/charts/chart-pie.vue
浏览文件 @ 368b0b32
<!-- 饼图 -->
<template>
<section class="chart-pie">
<div :id="id" :style="{width: '100%', height: '220px'}"></div>
<div v-show="isShow" :id="id" :style="{width: '100%', height: '220px'}"></div>
<NoContent v-show="!isShow" :id="id" :style="{width: '100%', height: '220px'}"></NoContent>
</section>
</template>
<script>
import { echartColors } from '@/utils/index'
import NoContent from "@/components/bussiness/no-content";
let vm = null;
let chartPie = null;
......@@ -18,6 +20,9 @@ let certNameConfig = {
'4': '获不及格人数',
}
export default {
components: {
NoContent
},
props: {
id: {
type: String,
......@@ -41,23 +46,29 @@ export default {
chartHeight: "1000px",
handledData: {},
legendData: [],
seriesData: {}
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
seriesData: {},
isShow: true
};
},
watch: {
pieData: {
handler(newValue, oldValue) {
// 处理数据
for(let i = 0; i < newValue.length; i ++) {
if(this.certFlag == 1 && newValue[i].certId != -1) {
newValue[i].certName = '已获证人数'
} else {
newValue[i].certName = certNameConfig[newValue[i].certId];
// 如果有数据，则处理数据并显示图表
if(newValue.length) {
this.isShow = true;
for(let i = 0; i < newValue.length; i ++) {
if(this.certFlag == 1 && newValue[i].certId != -1) {
newValue[i].certName = '已获证人数'
} else {
newValue[i].certName = certNameConfig[newValue[i].certId];
}
}
this.handlePieData(newValue);
this.drawPie();
} else {
this.isShow = false;
}
this.handlePieData(newValue);
this.drawPie();
},
deep: true
}
......
pages/index.vue
浏览文件 @ 368b0b32
......@@ -70,7 +70,7 @@
<CommonCard :cardList="examCardList"></CommonCard>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成项目考试次数情况"></CommonTitle>
<ChartColumnVerticalTimes :dataList="generalExamData.examTimesList" id="chartCourseTimesId" :colors="colors"></ChartColumnVerticalTimes>
<ChartColumnVerticalTimes :dataList="(generalExamData.examTimesList || []).slice(0, 5)" id="chartCourseTimesId" :colors="colors"></ChartColumnVerticalTimes>
<ShowAll v-show="generalExamData && generalExamData.examTimesList.length > 5" @action="gotoPage('/examtimes')" class="mt-10"></ShowAll>
<CommonSplitLine></CommonSplitLine>
<CommonTitle title="完成项目考试分数情况"></CommonTitle>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或