m

shuzhixiangzheng/src/components/OtherChilds/LeftPage.vue

@@ -6,8 +6,10 @@
     </div>
     <img id="person_status_img" src="../../assets/png/2.png" />
     <PepoleStatus></PepoleStatus>
-    <img id="dizhizaihai_img" src="../../assets/png/dizhizaihai.png" />
-    <Dezhizhaihai :data='dataAll.damage'></Dezhizhaihai>
+    <img id="dizhizaihai_img" src="../../assets/png/dizhizaihai.png" v-if="showDZ"/>
+    <Dezhizhaihai :data='dataAll.damage' v-if="showDZ"></Dezhizhaihai>
+    <img id="populationStructure_img" src="../../assets/png/renkoujieguo.png" v-if="!showDZ"/>
+    <PopulationStructure v-if="!showDZ"></PopulationStructure>
   </div>
 </template>
   
@@ -15,6 +17,7 @@
 import ViewPage from "../MainPageChild/ViewPage.vue";
 import PepoleStatus from "../OtherChilds/PepoleStatus.vue";
 import Dezhizhaihai from "./Dezhizhaihai.vue";
+import PopulationStructure from "./PopulationStructure.vue";
 export default {
   props: ["dataAll"],
   name: "",
@@ -22,9 +25,12 @@ export default {
     ViewPage,
     PepoleStatus,
     Dezhizhaihai,
+    PopulationStructure
   },
   data() {
-    return {};
+    return {
+        showDZ:true
+    };
   },
   mounted() {
     console.log('拿到数据',this.dataAll);
@@ -67,5 +73,10 @@ export default {
   width: 200px;
   top: 70%;
 }
+#populationStructure_img{
+    position: absolute;
+  width: 150px;
+  top: 70%;
+}
 </style>
   

shuzhixiangzheng/src/components/OtherChilds/PopulationStructure.vue

@@ -1,5 +1,6 @@
 <template>
     <div id="populationStructure">
+        <img src="../../assets/png/renkoutuli.png" id="renkou">
         <div id="pop"></div>
     </div>
   </template>
@@ -23,11 +24,11 @@
             var myChart = echarts.init(document.getElementById('pop'));
 		var xData = ["18以下", "18-60","60-80","80以上"];
 		var yData = [50, 87.3,30,70];
-		var shadowYData=[100,100];
+		var shadowYData=[100,100,100,100];
         //#0D53CC
 		var color="#19dfdd";
 		var shadowColor="#0b5767";  
-		var barWidth=50;
+		var barWidth=15;
 		var option = {
 			// backgroundColor: '#05233b',
 			"grid": {
@@ -108,38 +109,38 @@
 					"color": color,
 					"data": yData
 				},
-				{
-					name: '',
-					type: 'pictorialBar',
-					symbolSize: [barWidth+5, 15],
-					symbolOffset: [0, 12],
-					z: 10,
-					itemStyle: {
-						normal: {
-							color: 'transparent',
-							borderColor: color,
-							borderType: 'solid',
-							borderWidth: 1
-						}
-					},
-					data: yData
-				},
-				{
-					name: '',
-					type: 'pictorialBar',
-					symbolSize: [barWidth+10, 20],
-					symbolOffset: [0, 18],
-					z: 10,
-					itemStyle: {
-						normal: {
-							color: 'transparent',
-							borderColor: color,
-							borderType: 'solid',
-							borderWidth: 2
-						}
-					},
-					data: yData
-				},
+				// {
+				// 	name: '',
+				// 	type: 'pictorialBar',
+				// 	symbolSize: [barWidth+5, 15],
+				// 	symbolOffset: [0, 12],
+				// 	z: 10,
+				// 	itemStyle: {
+				// 		normal: {
+				// 			color: 'transparent',
+				// 			borderColor: color,
+				// 			borderType: 'solid',
+				// 			borderWidth: 1
+				// 		}
+				// 	},
+				// 	data: yData
+				// },
+				// {
+				// 	name: '',
+				// 	type: 'pictorialBar',
+				// 	symbolSize: [barWidth+10, 20],
+				// 	symbolOffset: [0, 18],
+				// 	z: 10,
+				// 	itemStyle: {
+				// 		normal: {
+				// 			color: 'transparent',
+				// 			borderColor: color,
+				// 			borderType: 'solid',
+				// 			borderWidth: 2
+				// 		}
+				// 	},
+				// 	data: yData
+				// },
 				{
 					type: 'bar',
 					"barWidth": barWidth,
@@ -149,13 +150,13 @@
 						normal: {
 							color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
 									offset: 0,
-									color: "rgba(25,223,221,.7)"
+									color: "rgba(13,83,204,.7)"
 								},
 								{
 									offset: 1,
-									color: "rgba(25,223,221,.3)"
+									color: "rgba(13,83,204,.2)"
 								}
-							]),
+							]), 
 						},
 					},
 					data: yData
@@ -170,7 +171,7 @@
 					"label": {
 						"show": false,
 					},
-					color: shadowColor,
+					 color: shadowColor,
 					data: shadowYData
 				},
 				{
@@ -198,7 +199,11 @@
   
   
   <style scoped>
- 
+ #renkou{
+    position: absolute;
+    width: 25%;
+    right: 10%;
+ }
   #populationStructure{
       position: absolute;
       width: 100%;