hightchart reflow

src/views/Screen/index.vue

@@ -274,13 +274,17 @@ emptyFlag4byqyndsjsfbhqs:false,
 		this.infoWindow.setContent(content);
 		this.infoWindow.open(this.map, marker.getPosition());
 	  },
-	  async getAllApi(){
+	  getAllApi(){
+		this.$nextTick(async() => {
 			await this.sjzl()
-		await this.srph();
 		  await this.qycxcysjfx();
+		  await this.srph();
 		  await this.byqyjnzsrphb();
 		  await this.byqyndsjsfbhqs();
 		await this.zfqyndsjsfbhqs();
+		})
+		
+
 	  },
 	  sjzl() {
 		// 孵化数据总览
@@ -303,6 +307,7 @@ emptyFlag4byqyndsjsfbhqs:false,
 	  },
 	  qycxcysjfx() {
 		//企业创新创业数据分析
+		return new Promise((resolve, reject) => {
 		request({
 		  url: "api/homePage/enterpriseInnovationAnalysis",
 		  method: "get",
@@ -319,6 +324,20 @@ emptyFlag4byqyndsjsfbhqs:false,
 		  });
 		  var seriesData = seriesFormat.seriesData;
 		  var opts = {
+			chartCallback:function(c){
+				if(c.containerWidth <10){ // 图表加载时,容器还没有准备好,导致图表显示异常.
+					console.error('图表渲染问题出现,重新渲染.')
+					// c.reflow()
+					// 重新初始话
+					setTimeout(() => {
+						Highchart.template.rich(
+							document.querySelector(".qycxcysjfxWrapper"),
+							list,
+							opts
+						);
+					}, 900);
+				}
+			},
 			chartConfig: {
 			  chart: {
 				backgroundColor: "transparent",
@@ -404,9 +423,12 @@ emptyFlag4byqyndsjsfbhqs:false,
 			list,
 			opts
 		  );
+		resolve('ok')
+		})
 		});
 	  },
 	  srph() {
+		return new Promise((resolve, reject) => {
 		// 在孵企业今年总收入排行榜
 		request({
 		  url: "api/homePage/incubatorIncomeRanking",
@@ -428,6 +450,18 @@ emptyFlag4byqyndsjsfbhqs:false,
 			colors: colors,
 		  });
 		  var opts = {
+			chartCallback:function(c){
+				if(c.containerWidth <10){ // 图表加载时,容器还没有准备好,导致图表显示异常.
+					console.error('图表渲染问题出现,重新渲染.')
+					setTimeout(() => {// 重新初始渲染图表
+						Highchart.template.rich(
+							document.querySelector(".srphWrapper"),
+							list,
+							opts
+						);
+					}, 900);
+				}
+			},
 			chartConfig: {
 			  chart: {
 				type: "bar",
@@ -511,10 +545,14 @@ emptyFlag4byqyndsjsfbhqs:false,
 			list,
 			opts
 		  );
+		  resolve('ok')
+		})
 		});
+
 	  },
 	 
 	  byqyjnzsrphb() {
+		return new Promise((resolve, reject) => {
 		// 毕业企业今年总收入排行榜
 		request({
 		  url: "api/homePage/graduatedIncomeRanking",
@@ -538,6 +576,18 @@ emptyFlag4byqyndsjsfbhqs:false,
 			colors: colors,
 		  });
 		  var opts = {
+			chartCallback:function(c){
+				if(c.containerWidth <10){ // 图表加载时,容器还没有准备好,导致图表显示异常.
+					console.error('图表渲染问题出现,重新渲染.')
+					setTimeout(() => {// 重新初始渲染图表
+						Highchart.template.rich(
+							document.querySelector(".byqyjnzsrphbWrapper"),
+							list,
+							opts
+						);
+					}, 900);
+				}
+			},
 			chartConfig: {
 			  chart: {
 				type: "bar",
@@ -622,11 +672,15 @@ emptyFlag4byqyndsjsfbhqs:false,
 			list,
 			opts
 		  );
-
+		  resolve('ok')
+		})
 		});
 	  },
 	  
 	  zfqyndsjsfbhqs() {
+		return new Promise((resolve, reject) => {
+
+
 		// 在孵企业年度上缴税费变化趋势
 		request({
 		  url: "api/homePage/incubatorTaxTrend",
@@ -646,6 +700,18 @@ emptyFlag4byqyndsjsfbhqs:false,
 		  var categories = chartData.categories;
 		  var series = chartData.series;
 		  var opts = {
+			chartCallback:function(c){
+				if(c.containerWidth <10){ // 图表加载时,容器还没有准备好,导致图表显示异常.
+					console.error('图表渲染问题出现,重新渲染.')
+					setTimeout(() => {// 重新初始渲染图表
+						Highchart.template.rich(
+							document.querySelector(".zfqyndsjsfbhqsWrapper"),
+							list,
+							opts
+						);
+					}, 900);
+				}
+			},
 			chartConfig: {
 			  chart: {
 				marginTop: getPxByRem(0.4),
@@ -714,9 +780,13 @@ emptyFlag4byqyndsjsfbhqs:false,
 			list,
 			opts
 		  );
+		  resolve('ok')
+		})
 		});
 	  },
 	  byqyndsjsfbhqs() {
+			return new Promise((resolve, reject) => {
+
 				//毕业企业年度上缴税费变化趋势
 			request({
 			url: "api/homePage/graduatedTaxTrend",
@@ -736,6 +806,18 @@ emptyFlag4byqyndsjsfbhqs:false,
 			var categories = chartData.categories;
 			var series = chartData.series;
 			var opts = {
+				chartCallback:function(c){
+					if(c.containerWidth <10){ // 图表加载时,容器还没有准备好,导致图表显示异常.
+						console.error('图表渲染问题出现,重新渲染.')
+						setTimeout(() => {// 重新初始渲染图表
+							Highchart.template.rich(
+								document.querySelector(".byqyndsjsfbhqsWrapper"),
+								list,
+								opts
+							);
+						}, 900);
+					}
+				},
 				chartConfig: {
 				chart: {
 					marginTop: getPxByRem(0.4),
@@ -804,9 +886,13 @@ emptyFlag4byqyndsjsfbhqs:false,
 				list,
 				opts
 			);
+				resolve('ok');
+			});
+
 		});
 	  },
 	  getIncubatorMarkers() {
+	
 		request({
 		  url: "api/homePage/incubatorLocation",
 		  method: "get",
@@ -852,7 +938,7 @@ emptyFlag4byqyndsjsfbhqs:false,
 				this.getAllApi()
 				
 				this.showSreen = true
-			}, 3000);
+			}, 1000);
 
 		});
 	  },