解决图表为空的问题

components/bussiness/charts/chart-column-horizontal-tc-long.vue

@@ -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

@@ -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

 <!-- 柱状图-横向 -->
 <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

 <!-- 柱状图-竖向 -->
 <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

@@ -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

 <!-- 柱状图-竖向 -->
 <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

 <!-- 人员学历情况饼图 -->
 <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

 <!-- 人员职称情况饼图 -->
 <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

 <!-- 饼图 -->
 <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

@@ -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>