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,12 +42,15 @@ export default {
data() {
return {
chartWidth: "100%",
chartHeight: "200px"
chartHeight: "200px",
isShow: true
};
},
watch: {
dataList: {
handler(newVal) {
if(newVal.length) {
this.isShow = true;
let yAxisData = [],
series0Data = [],
series1Data = [];
......@@ -66,16 +72,16 @@ export default {
this.chartHeight = 53 * this.dataList.length + "px";
this.drawColumn(yAxisData, series0Data, series1Data);
}
} else {
this.isShow = false;
}
},
deep: true
}
},
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,19 +33,21 @@ export default {
data() {
return {
chartWidth: "300px",
chartHeight: "350px"
chartHeight: "350px",
isShow: true,
};
},
watch: {
dataList: {
handler(newVal) {
if(newVal.length) {
this.isShow = true;
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);
......@@ -53,6 +60,9 @@ export default {
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,6 +56,8 @@ export default {
watch: {
echartsData: {
handler(newVal, oldValue) {
if(newVal.length) {
this.isShow = true;
// console.log(newVal, oldValue);
vm.legendData = [];
vm.yAxisData = [];
......@@ -105,6 +113,9 @@ export default {
}
this.handlerSeriesData(newVal);
vm.drawColumn();
} else {
this.isShow = false;
}
},
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,13 +132,15 @@ export default {
barWidth: 20 //柱图宽度
}
]
}
},
isShow: true
};
},
watch: {
dataList: {
handler(newVal) {
// debugger
if(newVal.length) {
this.isShow = true;
this.xAxisData = newVal.map( item => {
return item.times
})
......@@ -143,6 +150,9 @@ export default {
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,6 +57,8 @@ export default {
watch: {
dataList: {
handler(newVal) {
if(newVal.length) {
this.isShow = true;
let yAxisData = [], series0Data = [], series1Data = []
yAxisData = newVal.map( item => {
return this.shortName(item.classifyName)
......@@ -64,6 +70,9 @@ export default {
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,12 +126,16 @@ export default {
barWidth: 20 //柱图宽度
}
]
}
},
isShow: true
};
},
watch: {
dataList: {
handler(newVal) {
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
......@@ -137,6 +146,10 @@ export default {
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;
}
},
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,14 +46,16 @@ export default {
chartHeight: "1000px",
handledData: {},
legendData: [],
seriesData: {}
// 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
seriesData: {},
isShow: true
};
},
watch: {
pieData: {
handler(newValue, oldValue) {
// 处理数据
// 如果有数据，则处理数据并显示图表
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 = '已获证人数'
......@@ -58,6 +65,10 @@ export default {
}
this.handlePieData(newValue);
this.drawPie();
} else {
this.isShow = false;
}
},
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 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或