update

src/views/dike/managementGuarantee/standardizationConstruction/dataCharts.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="content">
-    暂无数据
+<!--    暂无数据-->
     <!-- <div ref="pieEle" style="width: 30%; height: 100%"></div> -->
     <!-- <div ref="barEle" style="width: 100%; height: 100%"></div> -->
+    <div ref="barEle" style="width: 100%; height: 100%"></div>
   </div>
 </template>
 <script>
@@ -13,10 +14,11 @@ export default {
     return {
       pieChartData: [],
       barChartData: [],
+
     };
   },
   created() {
-    // this.getData();
+    this.getData();
   },
   methods: {
     async getData() {
@@ -26,7 +28,13 @@ export default {
       //   this.pieChartData.push({ value: res1[0][key], name: key });
       // }
 
-      this.barChartData = res2;
+      this.barChartData = {
+        "汕头市": {0: "1", 1: "1",2: '1',3:'1'},
+        "佛山市": {0: "1", 1: "1",2: '1',3:'1'},
+        "珠海市": {0: "1", 1: "1",2: '1',3:'1'},
+        "广州市": {0: "1", 1: "1",2: '1',3:'1'},
+        "中山市": {0: "1", 1: "1",2: '1',3:'1'},
+      };
       // this.pieInit();
       this.barInit();
       // console.log("pieChartData", this.pieChartData);
@@ -100,7 +108,7 @@ export default {
         title: {
           // text: "World Population",
         },
-        color: ["#38A0FF", "#4CCA73", "#FBD437"],
+        color: ["#38A0FF", "#4CCA73", "#FBD437","#7e1439"],
         tooltip: {
           trigger: "axis",
           axisPointer: {
@@ -155,23 +163,29 @@ export default {
 
         series: [
           {
-            name: "政府部门责任人",
+            name: "江(河)堤",
             type: "bar",
             data: Object.values(this.barChartData).map((res) => res["0"]),
             barMaxWidth: "10%",
           },
           {
-            name: "主管部门责任人",
+            name: "湖堤",
             type: "bar",
             data: Object.values(this.barChartData).map((res) => res["1"]),
             barMaxWidth: "10%",
           },
           {
-            name: "管理单位责任人",
+            name: "海堤",
             type: "bar",
             data: Object.values(this.barChartData).map((res) => res["2"]),
             barMaxWidth: "10%",
           },
+          {
+            name: "围(圩，圈)堤",
+            type: "bar",
+            data: Object.values(this.barChartData).map((res) => res["3"]),
+            barMaxWidth: "10%",
+          },
         ],
       };
       // }

src/views/dike/managementGuarantee/standardizationConstruction/index.vue

@@ -10,7 +10,7 @@
         {{ item.routeName }}
       </el-breadcrumb-item>
     </el-breadcrumb>
-<!--    <dataCharts ref="dataCharts" />-->
+    <dataCharts ref="dataCharts" />
     <listPage :chartEleGetData="chartEleGetData" />
   </div>
 </template>

src/views/sluice/managementGuarantee/standardizationConstruction/dataCharts.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="content">
-    暂无数据
+<!--    暂无数据-->
     <!-- <div ref="pieEle" style="width: 30%; height: 100%"></div> -->
     <!-- <div ref="barEle" style="width: 100%; height: 100%"></div> -->
+    <div ref="barEle" style="width: 100%; height: 100%"></div>
   </div>
 </template>
 <script>
@@ -16,7 +17,7 @@ export default {
     };
   },
   created() {
-    // this.getData();
+    this.getData();
   },
   methods: {
     async getData() {
@@ -26,7 +27,13 @@ export default {
       //   this.pieChartData.push({ value: res1[0][key], name: key });
       // }
 
-      this.barChartData = res2;
+      this.barChartData = {
+        "汕头市": {0: "1", 1: "1",2: '1',3:'1',4:"1",5:'1',6:'1',7:'1'},
+        "佛山市": {0: "1", 1: "1",2: '1',3:'1',4:"1",5:'1',6:'1',7:'1'},
+        "珠海市": {0: "1", 1: "1",2: '1',3:'1',4:"1",5:'1',6:'1',7:'1'},
+        "广州市": {0: "1", 1: "1",2: '1',3:'1',4:"1",5:'1',6:'1',7:'1'},
+        "中山市": {0: "1", 1: "1",2: '1',3:'1',4:"1",5:'1',6:'1',7:'1'},
+      };
       // this.pieInit();
       this.barInit();
       // console.log("pieChartData", this.pieChartData);
@@ -98,9 +105,17 @@ export default {
       // } else {
       option = {
         title: {
-          // text: "World Population",
+          // text: "World Population",38A0FF
         },
-        color: ["#38A0FF", "#4CCA73", "#FBD437"],
+        color: [
+          "#38A0FF",
+          "#4CCA73",
+          "#FBD437",
+          "#e15145",
+          "#da8282",
+          "#bfc4ad",
+          "#8ec996",
+          "#c412bb"],
         tooltip: {
           trigger: "axis",
           axisPointer: {
@@ -155,23 +170,58 @@ export default {
 
         series: [
           {
-            name: "政府部门责任人",
+            name: "节制闸",
             type: "bar",
             data: Object.values(this.barChartData).map((res) => res["0"]),
             barMaxWidth: "10%",
           },
           {
-            name: "主管部门责任人",
+            name: "分(泄)洪闸",
             type: "bar",
             data: Object.values(this.barChartData).map((res) => res["1"]),
             barMaxWidth: "10%",
           },
           {
-            name: "管理单位责任人",
+            name: "排(退)水闸",
             type: "bar",
             data: Object.values(this.barChartData).map((res) => res["2"]),
             barMaxWidth: "10%",
           },
+          {
+            name: "引(进)水闸",
+            type: "bar",
+            data: Object.values(this.barChartData).map((res) => res["3"]),
+            barMaxWidth: "10%",
+          },
+          {
+            name: "橡胶坝",
+            type: "bar",
+            data: Object.values(this.barChartData).map((res) => res["4"]),
+            barMaxWidth: "10%",
+          },
+          {
+            name: "档潮闸",
+            type: "bar",
+            data: Object.values(this.barChartData).map((res) => res["5"]),
+            barMaxWidth: "10%",
+          }, {
+            name: "档潮闸",
+            type: "bar",
+            data: Object.values(this.barChartData).map((res) => res["5"]),
+            barMaxWidth: "10%",
+          },
+          {
+            name: "排(冲)沙闸",
+            type: "bar",
+            data: Object.values(this.barChartData).map((res) => res["6"]),
+            barMaxWidth: "10%",
+          },
+          {
+            name: "船闸",
+            type: "bar",
+            data: Object.values(this.barChartData).map((res) => res["7"]),
+            barMaxWidth: "10%",
+          },
         ],
       };
       // }

src/views/sluice/managementGuarantee/standardizationConstruction/index.vue

@@ -10,7 +10,7 @@
         {{ item.routeName }}
       </el-breadcrumb-item>
     </el-breadcrumb>
-<!--    <dataCharts ref="dataCharts" />-->
+    <dataCharts ref="dataCharts" />
     <listPage :chartEleGetData="chartEleGetData" />
   </div>
 </template>