修改

src/views/dike/safetyManage/declarationManage/declare/components/dataCharts.vue

@@ -11,7 +11,6 @@ export default {
   data() {
     return {
       pieChartData: [],
-      seriesData: [],
       selected: {},
       barChartData: [],
       loading: true,

src/views/dike/safetyManage/declarationManage/examine/components/dataCharts.vue

@@ -11,7 +11,6 @@ export default {
   data() {
     return {
       pieChartData: [],
-      seriesData: [],
       selected: {},
       barChartData: [],
       loading: true,
@@ -27,7 +26,6 @@ export default {
       const res2 = await getHistogram();
       this.pieChartData = [];
       for (let key in res1[0]) {
-        let name = key;
         this.pieChartData.push({
           value: res1[0][key],
           name: key?.substring(0, 10),

src/views/sluice/safetyManage/declarationManage/declare/components/dataCharts.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="content">
+  <div class="content" v-loading="loading">
     <div ref="pieEle" style="width: 30%; height: 100%"></div>
     <div ref="barEle" style="width: 70%; height: 100%"></div>
   </div>
@@ -11,7 +11,9 @@ export default {
   data() {
     return {
       pieChartData: [],
+      selected: {},
       barChartData: [],
+      loading: true,
     };
   },
   created() {
@@ -19,11 +21,19 @@ export default {
   },
   methods: {
     async getData() {
+      this.loading = true;
       const res1 = await getPie();
       const res2 = await getHistogram();
       this.pieChartData = [];
       for (let key in res1[0]) {
-        this.pieChartData.push({ value: res1[0][key], name: key });
+        this.pieChartData.push({
+          value: res1[0][key],
+          name: key?.substring(0, 10),
+        });
+      }
+      for (let i = 0; i < this.pieChartData.length; i++) {
+        let name = this.pieChartData[i].name;
+        this.selected[name] = i < 7; //限制图表中起始显示10个，这里必须保证 name 不为空
       }
       // for (let key in res1[0]) {
       //   this.barChartData.push({ value: res1[0][key], name: key });
@@ -31,6 +41,7 @@ export default {
       this.barChartData = res2;
       this.pieInit();
       this.barInit();
+      this.loading = false;
       console.log("pieChartData", this.pieChartData);
       console.log("barChartData", this.barChartData);
     },
@@ -51,6 +62,8 @@ export default {
           orient: "horizontal",
           bottom: "2%",
           icon: "circle",
+          type: "scroll",
+          selected: this.selected,
         },
         series: [
           {
@@ -106,6 +119,18 @@ export default {
           bottom: "12%",
           containLabel: true,
         },
+        dataZoom: [
+          {
+            type: "inside",
+            show: false,
+            xAxisIndex: [0],
+            start: 0,
+            end: 50,
+            // textStyle: {
+            //   color: "#ccd7d7",
+            // },
+          },
+        ],
         xAxis: {
           type: "category",
           axisLine: {

src/views/sluice/safetyManage/declarationManage/examine/components/dataCharts.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="content">
+  <div class="content" v-loading="loading">
     <div ref="pieEle" style="width: 30%; height: 100%"></div>
     <div ref="barEle" style="width: 70%; height: 100%"></div>
   </div>
@@ -11,7 +11,9 @@ export default {
   data() {
     return {
       pieChartData: [],
+      selected: {},
       barChartData: [],
+      loading: true,
     };
   },
   created() {
@@ -19,11 +21,19 @@ export default {
   },
   methods: {
     async getData() {
+      this.loading = true;
       const res1 = await getPie();
       const res2 = await getHistogram();
       this.pieChartData = [];
       for (let key in res1[0]) {
-        this.pieChartData.push({ value: res1[0][key], name: key });
+        this.pieChartData.push({
+          value: res1[0][key],
+          name: key?.substring(0, 10),
+        });
+      }
+      for (let i = 0; i < this.pieChartData.length; i++) {
+        let name = this.pieChartData[i].name;
+        this.selected[name] = i < 7; //限制图表中起始显示10个，这里必须保证 name 不为空
       }
       // for (let key in res1[0]) {
       //   this.barChartData.push({ value: res1[0][key], name: key });
@@ -31,6 +41,7 @@ export default {
       this.barChartData = res2;
       this.pieInit();
       this.barInit();
+      this.loading = false;
       console.log("pieChartData", this.pieChartData);
       console.log("barChartData", this.barChartData);
     },
@@ -51,6 +62,8 @@ export default {
           orient: "horizontal",
           bottom: "2%",
           icon: "circle",
+          type: "scroll",
+          selected: this.selected,
         },
         series: [
           {
@@ -106,6 +119,18 @@ export default {
           bottom: "12%",
           containLabel: true,
         },
+        dataZoom: [
+          {
+            type: "inside",
+            show: false,
+            xAxisIndex: [0],
+            start: 0,
+            end: 50,
+            // textStyle: {
+            //   color: "#ccd7d7",
+            // },
+          },
+        ],
         xAxis: {
           type: "category",
           axisLine: {