1

src/views/securityCheck/components/graphicHome.vue

@@ -13,7 +13,7 @@ export default {
     },
   },
   watch: {
-    texter: {
+    "texter.data": {
       handler(val) {
         this.init();
       },
@@ -23,14 +23,15 @@ export default {
     return {};
   },
   created() {
+    this.init();
     // setTimeout(() => {
     //   this.init();
     // }, 2000);
   },
   mounted() {
-    setTimeout(() => {
-      this.init();
-    }, 4000);
+    // setTimeout(() => {
+    //   this.init();
+    // }, 4000);
   },
   methods: {
     init() {

src/views/securityCheck/views/cargoCharts.vue

@@ -19,17 +19,17 @@
         <p>不同综合风险等级货物分布比例</p>
       </div>
       <div class="content_classification">
-        <div class="chart"><GraphicEchart :id="20" :texter="dataall" /></div>
-        <div class="chart"><GraphicEchart :id="21" :texter="datarisk" /></div>
+        <div class="chart"><GraphicEchart :texter="dataall" /></div>
+        <div class="chart"><GraphicEchart :texter="datarisk" /></div>
         <div class="chart">
-          <GraphicEchart :id="31" :texter="dataLowrisk" />
+          <GraphicEchart :texter="dataLowrisk" />
         </div>
-        <div class="chart"><GraphicEchart :id="41" :texter="datafirst" /></div>
+        <div class="chart"><GraphicEchart :texter="datafirst" /></div>
         <div class="chart">
-          <GraphicEchart :id="51" :texter="dataordinary" />
+          <GraphicEchart :texter="dataordinary" />
         </div>
         <div class="chart">
-          <GraphicEchart :id="61" :texter="datastrictly" />
+          <GraphicEchart :texter="datastrictly" />
         </div>
       </div>
     </div>
@@ -45,6 +45,7 @@ export default {
   data() {
     return {
       dataall: {
+        id: 7,
         name: "总件数",
         cont: "20000",
         top: "35%",
@@ -64,6 +65,7 @@ export default {
         color: ["#E7EBF4", "#6161BD"],
       },
       datarisk: {
+        id: 8,
         name: "高风险货物级",
         cont: "70%",
         top: "35%",
@@ -83,6 +85,7 @@ export default {
         color: ["#E7EBF4", "#EE50A6"],
       },
       dataLowrisk: {
+        id: 9,
         name: "低风险货物级",
         cont: "70%",
         top: "35%",
@@ -102,6 +105,7 @@ export default {
         color: ["#E7EBF4", "#F3C742"],
       },
       datafirst: {
+        id: 10,
         name: "优先级",
         cont: "10%",
         top: "35%",
@@ -121,6 +125,7 @@ export default {
         color: ["#E7EBF4", "#5AC591"],
       },
       dataordinary: {
+        id: 11,
         name: "普通级",
         cont: "10%",
         top: "35%",
@@ -140,6 +145,7 @@ export default {
         color: ["#E7EBF4", "#70B4D4"],
       },
       datastrictly: {
+        id: 12,
         name: "严控级",
         cont: "10%",
         top: "35%",
@@ -165,7 +171,7 @@ export default {
     SecurityCheckHeader,
   },
   mounted() {
-    this.init();
+    // this.init();
   },
   methods: {
     //默认查询条件
@@ -181,10 +187,18 @@ export default {
           levelId: data[1],
           proxyId: data[2],
         };
-        console.log(params);
+        // console.log(params);
         const result = await correlation(params);
         if (result.status == 200) {
+          console.log(result);
+          let arr = [];
+          let arrx = [];
           this.dataall.data = result.data;
+          result.data.forEach((element) => {
+            arr.push(element.count);
+            arrx.push(element.channel);
+          });
+          this.init(arr, arrx);
           this.datarisk.data = result.data;
         }
         console.log(result);
@@ -195,11 +209,13 @@ export default {
     change() {
       this.$router.push("./cargoRelevanceTable");
     },
-    init() {
+    init(arr, arrx) {
       let myChart = this.$echarts.init(
         document.getElementById("echarts-proportion")
       ); //统计折线
-      myChart.setOption(eleCake);
+      eleCake.series[0].data = arr;
+      eleCake.xAxis.data = arrx;
+      myChart.setOption(eleCake, true);
       window.onresize = () => {
         myChart.resize();
       };