1

src/utils/app-ecahrts.js

@@ -11,6 +11,9 @@ export const eleCake = {
     bottom: '5%',
     containLabel: true
   },
+  legend: {
+    data: ['高风险', '低风险', '优先', '普通', '严控']
+  },
   dataZoom: [{
     type: 'slider',//给x轴设置滚动条
     show: true, //flase直接隐藏图形
@@ -106,6 +109,26 @@ export const eleCake = {
     },
     data: [300, 25, 26, 20, 10, 20]
   },
+  {
+    name: '总数',    // 总数显示，生成一个总数的柱状图，将颜色设为透明，        
+    type: 'bar',     // label将位置设备内部底部，造成一个总数显示在
+    stack: '总',    // 柱状图上方的假象
+    label: {
+      normal: {
+        // offset: ['50', '80'],
+        show: true,
+        position: 'insideBottom',
+        formatter: '{c}',         // 显示的总数
+        textStyle: { color: '#000' }
+      }
+    },
+    itemStyle: {
+      normal: {
+        color: 'rgba(128, 128, 128, 0)'      // 柱状图颜色设为透明
+      }
+    },
+    data: []
+  }
   ]
 }
 
@@ -244,6 +267,9 @@ export const pillar = {
 // }
 export const discoloration = {
   tooltip: {},
+  legend: {
+    data: ['A', 'B', 'C', 'D']
+  },
   // legend: {
   //   data: ['一月销量', '二月销量'],
   //   right: '25%',
@@ -336,6 +362,26 @@ export const discoloration = {
     },
     data: [300, 25, 26, 20, 10, 20]
   },
+  {
+    name: '总数',    // 总数显示，生成一个总数的柱状图，将颜色设为透明，        
+    type: 'bar',     // label将位置设备内部底部，造成一个总数显示在
+    stack: '总',    // 柱状图上方的假象
+    label: {
+      normal: {
+        // offset: ['50', '80'],
+        show: true,
+        position: 'insideBottom',
+        formatter: '{c}',         // 显示的总数
+        textStyle: { color: '#000' }
+      }
+    },
+    itemStyle: {
+      normal: {
+        color: 'rgba(128, 128, 128, 0)'      // 柱状图颜色设为透明
+      }
+    },
+    data: []
+  }
   ]
 }
 //安检通道综合效率----柱状图
@@ -382,6 +428,9 @@ export const discoloration = {
 // }
 export const discolorationcops = {
   tooltip: {},
+  legend: {
+    data: ['A', 'B', 'C', 'D']
+  },
   // legend: {
   //   data: ['一月销量', '二月销量'],
   //   right: '25%',
@@ -474,6 +523,26 @@ export const discolorationcops = {
     },
     data: [300, 25, 26, 20, 10, 20]
   },
+  {
+    name: '总数',    // 总数显示，生成一个总数的柱状图，将颜色设为透明，        
+    type: 'bar',     // label将位置设备内部底部，造成一个总数显示在
+    stack: '总',    // 柱状图上方的假象
+    label: {
+      normal: {
+        // offset: ['50', '80'],
+        show: true,
+        position: 'insideBottom',
+        formatter: '{c}',         // 显示的总数
+        textStyle: { color: '#000' }
+      }
+    },
+    itemStyle: {
+      normal: {
+        color: 'rgba(128, 128, 128, 0)'      // 柱状图颜色设为透明
+      }
+    },
+    data: []
+  }
   ]
 }
 

src/views/system/securityCheck/views/cargoCharts.vue

@@ -295,6 +295,10 @@ export default {
           let ptall = eval(pt.join('+')) //普通级总和
           let strictlyall = eval(strictly.join('+')) //严控级总和
           let alldata = arrall + Lowall + firsall + ptall + strictlyall // 总数
+          let datas = []
+          for (let i = 0; i <= arr.length; i++) {
+            datas[i] = arr[i] + Low[i] + firs[i] + pt[i] + strictly[i]
+          }
           // arrx.forEach((element) => {
           //   let obj = {
           //     name: element,
@@ -302,7 +306,7 @@ export default {
           //   };
           //   this.destination.push(obj);
           // });
-          this.init(arr, arrx, Low, firs, pt, strictly)
+          this.init(arr, arrx, Low, firs, pt, strictly, datas)
           this.dataall.cont = alldata
           this.dataall.data = [
             {
@@ -403,13 +407,14 @@ export default {
         query: this.queryData,
       })
     },
-    init(arr, arrx, Low, firs, pt, strictly) {
+    init(arr, arrx, Low, firs, pt, strictly, datas) {
       let myChart = this.$echarts.init(document.getElementById('echarts-proportion')) //统计折线
       eleCake.series[0].data = arr
       eleCake.series[1].data = Low
       eleCake.series[2].data = firs
       eleCake.series[3].data = pt
       eleCake.series[4].data = strictly
+      eleCake.series[5].data = datas
       eleCake.xAxis.data = arrx
       myChart.clear()
       myChart.setOption(eleCake, true)
@@ -428,10 +433,12 @@ export default {
         }
         params.riskRating = a.seriesName
         params.destination = a.name
-        that.$router.push({
-          path: '/securityCheck/waybillTable',
-          query: params,
-        })
+        if (a.seriesName !== '总数') {
+          that.$router.push({
+            path: '/securityCheck/waybillTable',
+            query: params,
+          })
+        }
       })
     },
   },

src/views/system/securityCheck/views/comprehensiveHome.vue

@@ -97,7 +97,11 @@ export default {
             })
             // console.log(arr);
           })
-          this.init(arr, arrx, Low, firs, pt)
+          let datas = []
+          for (let i = 0; i <= arr.length; i++) {
+            datas[i] = arr[i] + Low[i] + firs[i] + pt[i]
+          }
+          this.init(arr, arrx, Low, firs, pt, datas)
         }
         if (resultcopy.status == 200) {
           let arr = [] //高风险
@@ -120,7 +124,11 @@ export default {
             })
             // console.log(arr);
           })
-          this.inits(arr, arrx, Low, firs, pt)
+          let datas = []
+          for (let i = 0; i <= arr.length; i++) {
+            datas[i] = arr[i] + Low[i] + firs[i] + pt[i]
+          }
+          this.inits(arr, arrx, Low, firs, pt, datas)
         }
         // console.log(result)
       } catch (error) {
@@ -128,13 +136,14 @@ export default {
       }
     },
     //月
-    init(arr, arrx, Low, firs, pt) {
+    init(arr, arrx, Low, firs, pt, datas) {
       let myChart = this.$echarts.init(document.getElementById('comprehensive-month')) //统计折线
       let myChartcopy = this.$echarts.init(document.getElementById('comprehensive-day')) //统计折线
       discoloration.series[0].data = arr
       discoloration.series[1].data = Low
       discoloration.series[2].data = firs
       discoloration.series[3].data = pt
+      discoloration.series[4].data = datas
       discoloration.xAxis.data = arrx
       myChart.clear()
       myChart.setOption(discoloration)
@@ -146,16 +155,19 @@ export default {
         this.queryData.startTime = a.name + '-01'
         this.queryData.endTime = a.name + '-31'
         this.queryData.agentLevel = a.seriesName
-        this.echar()
+        if (a.seriesName !== '总数') {
+          this.echar()
+        }
       })
     },
     //日
-    inits(arr, arrx, Low, firs, pt) {
+    inits(arr, arrx, Low, firs, pt, datas) {
       let myChart = this.$echarts.init(document.getElementById('comprehensive-day')) //统计折线
       discolorationcops.series[0].data = arr
       discolorationcops.series[1].data = Low
       discolorationcops.series[2].data = firs
       discolorationcops.series[3].data = pt
+      discolorationcops.series[4].data = datas
       discolorationcops.xAxis.data = arrx
       myChart.clear()
       myChart.setOption(discolorationcops)
@@ -166,8 +178,10 @@ export default {
         this.queryData.startTime = a.name
         this.queryData.endTime = a.name
         this.queryData.agentLevel = a.seriesName
+        if (a.seriesName !== '总数') {
+          this.echar()
+        }
         // this.queryData.openResult = a.value;
-        this.echar()
       })
     },
   },

src/views/system/securityCheck/views/securityChannelHome.vue

@@ -89,19 +89,24 @@ export default {
             })
             // console.log(arr);
           })
-          this.init(arr, arrx, Low, firs, pt, strictly)
+          let datas = []
+          for (let i = 0; i <= arr.length; i++) {
+            datas[i] = arr[i] + Low[i] + firs[i] + pt[i] + strictly[i]
+          }
+          this.init(arr, arrx, Low, firs, pt, strictly, datas)
         }
       } catch (error) {
         console.log(error)
       }
     },
-    init(arr, arrx, Low, firs, pt, strictly) {
+    init(arr, arrx, Low, firs, pt, strictly, datas) {
       let myChart = this.$echarts.init(document.getElementById('comprehensiveCharts')) //统计折线
       eleCake.series[0].data = arr
       eleCake.series[1].data = Low
       eleCake.series[2].data = firs
       eleCake.series[3].data = pt
       eleCake.series[4].data = strictly
+      eleCake.series[5].data = datas
       eleCake.xAxis.data = arrx
       myChart.clear()
       myChart.setOption(eleCake, true)