1

src/views/securityCheck/components/graphicHome.vue

@@ -15,47 +15,35 @@ export default {
       type: Object,
     },
   },
-  // watch:{
-  //   "texter":function(val){
-  //     if(val){
-  //       alert(val)
-  //       this.init();
-  //     }
-  //   }
-  // },
+  watch: {
+    texter: function (val) {
+      if (val) {
+        alert(val);
+        this.init();
+      }
+    },
+  },
   data() {
     return {};
   },
-  mounted() {
-    // if (this.texter) {
-    //   this.init();
-    // }
-  },
+  // mounted() {
+  //   if (this.texter) {
+  //     this.init();
+  //   }
+  // },
   methods: {
     init() {
       let myChart = this.$echarts.init(
         document.getElementById(`chart_${this.id}`)
       ); //统计折线
-      console.log(myChart.series);
+      pillar.series.data = this.texter.data;
       pillar.title.text = this.texter.name;
       pillar.title.subtext = this.texter.cont;
+      pillar.title.top = this.texter.top;
       pillar.series[0].color = this.texter.color;
-      if (this.texter.textStyle) {
-        pillar.title.textStyle = this.texter.textStyle;
-      }
-      if (this.texter.subtextStyle) {
-        pillar.title.subtextStyle = this.texter.subtextStyle;
-      }
-      if (this.texter.top) {
-        pillar.title.top = this.texter.top;
-      }
-      if (this.texter.data) {
-        pillar.series[0].data = this.texter.data;
-      }
-      if(this.texter.legend){
-        pillar.legend = this.texter.legend
-      }
-      myChart.setOption(pillar);
+      myChart.clear();
+      myChart.setOption(pillar, true);
+      // myChart.setOption(pillar);
       window.onresize = () => {
         myChart.resize();
       };

src/views/securityCheck/views/cargoStatisticsHome.vue

@@ -17,20 +17,24 @@
             </div>
             <div class="chart_cont">
               <div class="chart_left">
-                <GraphicEchart :id="7" :texter="dataall" ref="chart"/>
+                <GraphicEchart :id="7" :texter="dataall" ref="chart" />
               </div>
               <div class="chart_right">
-                <div class="child">
+                <div
+                  class="child"
+                  v-for="(item, index) in dataall.data"
+                  :key="index"
+                >
                   <div class="top">
-                    <div class="log"></div>
-                    <div class="name">高风险货物级</div>
+                    <div class="log" :style="{ background: item.color }"></div>
+                    <div class="name">{{ item.name }}</div>
                   </div>
                   <div class="boot">
-                    <div class="child">件数：100</div>
-                    <div class="child">占比：20%</div>
+                    <div class="child">件数：{{ item.value }}</div>
+                    <div class="child">占比：{{ item.proportion }}</div>
                   </div>
                 </div>
-                <div class="child">
+                <!-- <div class="child">
                   <div class="top">
                     <div class="log"></div>
                     <div class="name">低风险货物级</div>
@@ -69,7 +73,7 @@
                     <div class="child">件数：100</div>
                     <div class="child">占比：20%</div>
                   </div>
-                </div>
+                </div> -->
               </div>
             </div>
           </div>
@@ -385,7 +389,7 @@ export default {
           { value: 310, name: "4" },
           { value: 310, name: "5" },
         ],
-        top: "38%",
+        top: "41%",
         textStyle: {
           fontSize: "20",
           color: "#ffffff",
@@ -431,7 +435,7 @@ export default {
             const p = ((item.value / sum) * 100).toFixed(0);
             return "{name|" + name + "}" + "{percent|" + p + "}" + " %";
           },
-        }
+        },
       },
       dataLow: {
         name: "总件数",
@@ -470,16 +474,38 @@ export default {
       try {
         const result = await comprehensive({});
         let count = 0;
-        let arr = []
+        let counts = 0;
+        let arr = [];
         //获取总件数：
         result.data.forEach((item) => {
           count += item.num;
-          let obj =  { value: item.num, name:item.risk}
-          arr.push(obj)
+          let obj = { value: item.num, name: item.risk };
+          arr.push(obj);
+        });
+        this.dataall.cont = count;
+        this.dataall.data = arr;
+        this.dataall.color = [];
+        this.dataall.data.forEach((element) => {
+          if (element.name == "高风险") {
+            element.color = "#E86E5A";
+          } else if (element.name == "严控") {
+            element.color = "#9B73B4";
+          } else if (element.name == "优先") {
+            element.color = "#85C997";
+          } else if (element.name == "低风险") {
+            element.color = "#F1B172";
+          } else if (element.name == "普通") {
+            element.color = "#66ACD4";
+          }
+          counts += element.value;
+          this.dataall.color.push(element.color);
         });
-        this.dataall.cont=count;
-        this.dataall.data=arr;
-        this.$refs.chart.init()
+        this.dataall.data.forEach((element) => {
+          element.proportion = element.value / counts;
+          element.proportion = element.proportion.toFixed(2) * 100 + "%";
+        });
+        console.log(result.data, "11");
+        this.$refs.chart.init();
       } catch (error) {
         console.log(error);
       }
@@ -558,7 +584,7 @@ export default {
         > .log {
           width: 14px;
           height: 14px;
-          background: #e86e5a;
+          // background: #e86e5a;
           border-radius: 2px;
         }
         > .name {
@@ -583,31 +609,31 @@ export default {
         }
       }
     }
-    .child:nth-child(1) {
-      .log {
-        background: #e86e5a;
-      }
-    }
-    .child:nth-child(2) {
-      .log {
-        background: #f1b172;
-      }
-    }
-    .child:nth-child(3) {
-      .log {
-        background: #85c997;
-      }
-    }
-    .child:nth-child(4) {
-      .log {
-        background: #66acd4;
-      }
-    }
-    .child:nth-child(5) {
-      .log {
-        background: #9b73b4;
-      }
-    }
+    // .child:nth-child(1) {
+    //   .log {
+    //     background: #e86e5a;
+    //   }
+    // }
+    // .child:nth-child(2) {
+    //   .log {
+    //     background: #f1b172;
+    //   }
+    // }
+    // .child:nth-child(3) {
+    //   .log {
+    //     background: #85c997;
+    //   }
+    // }
+    // .child:nth-child(4) {
+    //   .log {
+    //     background: #66acd4;
+    //   }
+    // }
+    // .child:nth-child(5) {
+    //   .log {
+    //     background: #9b73b4;
+    //   }
+    // }
     > .childcop {
       width: 100%;
       > .top {