提交 368b0b32 编写于 作者: guangjun.yang's avatar guangjun.yang

解决图表为空的问题

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