统计分析

snowy-admin-web/src/views/gsc/pass-statistic/chart/bar.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="chart-main" ref="ref_main">
+    <div class="chart-ref" ref="ref_chart"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, reactive, ref, onMounted, watch, nextTick} from "vue";
+import * as echarts from 'echarts';
+
+const props = defineProps({
+  data: {},
+  color: {}
+})
+
+const {proxy} = getCurrentInstance()
+const state = reactive({
+  resizeObserver: <any>null,
+  chart: <any>null
+})
+const ref_chart = ref();
+const ref_main = ref();
+const initChart = () => {
+  echarts.dispose(ref_chart.value)
+  const chart = echarts.init(ref_chart.value);
+  const option = {
+    color: props.color,
+	grid: {
+      bottom: '10%',
+	  right: '20',
+	  left: '10%',
+	  top: '10%',
+	},
+    tooltip: {
+      trigger: 'axis'
+    },
+    xAxis: {
+      type: 'category',
+      data: props.data.map(v => v.name),
+      axisLine: {show: false},
+      axisTick: {show: false},
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(255, 255, 255, 0.50)',
+          type: 'dotted'
+        }
+      },
+      axisLabel: {
+        color: 'rgba(255, 255, 255, 0.50)',
+        fontSize: 10
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {show: false},
+      axisTick: {show: false},
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(255, 255, 255, 0.50)',
+          type: 'dotted'
+        }
+	  },
+      axisLabel: {
+        color: 'rgba(255, 255, 255, 0.50)',
+		fontSize: 10
+	  }
+    },
+    series: [
+      {
+        type: 'bar',
+        data: props.data,
+		  barWidth: 40,
+		  itemStyle: {
+			  borderColor: '#3681FF',
+			  color: {
+				  type: 'linear',
+				  x: 0,
+				  y: 0,
+				  x2: 0,
+				  y2: 1,
+				  colorStops: [{
+					  offset: 0, color: props.color[0] // 0% 处的颜色
+				  }, {
+					  offset: 1, color: props.color[1] // 100% 处的颜色
+				  }],
+				  global: false // 缺省为 false
+			  }
+		  },
+		  label: {
+			show: true,
+			  fontSize: 14,
+			  color: '#ffffff'
+		  }
+      }
+    ]
+  }
+  chart.setOption(option);
+  state.resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      chart && chart.resize()
+    }
+  })
+  state.resizeObserver.observe(ref_main.value);
+  return chart
+}
+watch(() => props.data, () => {
+  state.chart = initChart()
+})
+onMounted(() => {
+  nextTick(() => {
+    state.chart = initChart()
+  })
+  return () => {
+    state.resizeObserver?.unobserve(ref_main?.value)
+    state.resizeObserver?.disconnect()
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.chart-main {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+
+  .chart-ref {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

snowy-admin-web/src/views/gsc/pass-statistic/chart/pie2.vue

@@ -64,7 +64,9 @@ const initChart = () => {
               label: {
                 show: true,
                 position: 'center',
-                formatter: '{c}%',
+                formatter: (p) => {
+					return p.percent + '%'
+				},
                 fontSize: 28,
                 color: 'rgba(0, 255, 255, 1)'
               }
@@ -130,7 +132,7 @@ onMounted(() => {
   .bottom {
     position: absolute;
     color: #ffffff;
-    bottom: 60px;
+    bottom: 70px;
     display: flex;
     align-items: center;
     justify-content: center;

snowy-admin-web/src/views/gsc/pass-statistic/index.vue

@@ -57,14 +57,18 @@
         <div class="title">查验通过率分析
           <a-date-picker v-model:value="state.date4"/>
         </div>
-		  <div class="content">
+		  <div class="content" style="display: flex">
 			  <pie2Chart :data="state.arr4" :color="state.color4" :index="0"/>
+			  <pie2Chart :data="state.arr4" :color="state.color6" :index="1"/>
 		  </div>
       </div>
       <div class="statistic-block">
         <div class="title">平均查验时间分析
           <a-date-picker v-model:value="state.date5"/>
         </div>
+		  <div class="content">
+			  <barChart :data="state.arr5" :color="state.color5"/>
+		  </div>
       </div>
     </div>
     <div class="statistic-tr">
@@ -72,6 +76,10 @@
         <div class="title">拦截成功率分析
           <a-date-picker v-model:value="state.date6"/>
         </div>
+		  <div class="content" style="display: flex">
+			  <pie2Chart :data="state.arr6" :color="state.color4" :index="0"/>
+			  <pie2Chart :data="state.arr6" :color="state.color6" :index="1"/>
+		  </div>
       </div>
       <div class="statistic-block">
         <div class="title">风险趋势分析
@@ -90,6 +98,7 @@ import basicApi from '@/api/gsc/basic'
 import pieChart from './chart/pie.vue'
 import lineChart from './chart/line.vue'
 import pie2Chart from './chart/pie2.vue'
+import barChart from './chart/bar.vue'
 
 const {proxy} = getCurrentInstance()
 const state = reactive({
@@ -111,6 +120,8 @@ const state = reactive({
   color2: ['rgba(1, 255, 246, 1)', 'rgba(1, 255, 246, 0)'],
   color3: ['rgba(14, 156, 255, 1)', 'rgba(14, 156, 255, 0)'],
   color4: ['rgba(0, 194, 255, 1)', 'rgba(255, 0, 61, 1)'],
+  color5: ['#00A8FF', '#0F3352'],
+  color6: ['#00A3FF', '#BDFF00'],
   color7: ['#16C843', '#00EAFF', '#FB9A04', '#00A2FF', '#9966FF', '#FC6767', '#ABB2B4'],
 })
 const initData = () => {