类型占比

src/views/gis/business/clue/index.vue

@@ -457,7 +457,7 @@ export default defineComponent({
               width: 2px;
               height: 100%;
               left: 0;
-              background-color: #1280F1;
+              background-color: #1DA5FF;
             }
           }
           .three-main-right-info {

src/views/gis/business/situation/index.vue

@@ -48,7 +48,9 @@
         <div class="__gis-business-main_title">热点类型</div>
         <FocusContentCom class="two">2</FocusContentCom>
         <div class="__gis-business-main_title">类型占比</div>
-        <FocusContentCom class="three">3</FocusContentCom>
+        <FocusContentCom class="three">
+          <LxzbChartCom :data="lxzbData"/>
+        </FocusContentCom>
         <div class="__gis-business-main_title">反走私事件列表</div>
         <div class="form-two">
           <CusFormColumn
@@ -98,13 +100,15 @@ import {ElMessage, ElMessageBox} from "element-plus";
 import BusinessMainCom from '../common/business-main.vue'
 import FocusContentCom from '../common/focus-content.vue'
 import SjslChartCom from './sjsl-chart.vue'
+import LxzbChartCom from './lxzb-chart.vue'
 
 export default defineComponent({
   name: '',
   components: {
     BusinessMainCom,
     FocusContentCom,
-    SjslChartCom
+    SjslChartCom,
+    LxzbChartCom,
   },
   props: {},
   setup(props, {emit}) {
@@ -150,6 +154,13 @@ export default defineComponent({
           total: 0
         }
       },
+      lxzbData: [
+        {value: '171', name: '反走私'},
+        {value: '101', name: '酒类'},
+        {value: '70', name: '苹果手机'},
+        {value: '230', name: '其他'},
+        {value: '171', name: '手表'},
+      ]
     })
     const onSearch = () => {
       state.situation.form = JSON.parse(JSON.stringify(state.situation.tempForm))
@@ -366,7 +377,7 @@ export default defineComponent({
               width: 2px;
               height: 100%;
               left: 0;
-              background-color: #1280F1;
+              background-color: #1DA5FF;
             }
           }
           .one-main-right-info {

src/views/gis/business/situation/lxzb-chart.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="chart-main" ref="ref_main">
+    <div class="chart-ref" ref="ref_chart"/>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick, onUnmounted
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import * as echarts from 'echarts';
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    data: {
+      required: true,
+      default: () => []
+    },
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      resizeObserver: <any>null,
+      chart: <any>null
+    })
+    const ref_chart = ref();
+    const ref_main = ref();
+    const initChart = () => {
+      const chart = echarts.init(ref_chart.value);
+      const option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['0', '70%'],
+            roseType: 'radius',
+            percentPrecision: 0,
+            minAngle: 30,
+            label: {
+              lineHeight: 15,
+              color: '#4C4C4C' ,
+              fontWeight: 400,
+              fontFamily: 'Microsoft YaHei' ,
+              fontSize: 12,
+              formatter: (p) => {
+                return `{name|${p.name}}\n{num|${p.value}\r\r${p.percent}%}`
+              },
+              rich: {
+                name: {
+                  fontSize: 12,
+                  fontWeight: 600,
+                  color: 'rgba(52,52,52,0.5)',
+                },
+                num: {
+                  fontSize: 12,
+                  fontWeight: 600,
+                  color: '#43AEFE',
+                }
+              }
+            },
+            itemStyle: {
+              shadowBlur: 20,
+              shadowColor: 'rgba(0,0,0,0.3)'
+            },
+            data: props.data
+          }
+        ]
+      };
+      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()
+      }
+    })
+    return {
+      ...toRefs(state),
+      ref_chart,
+      ref_main,
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+  .chart-main {
+    width: 100%;
+    height: 100%;
+    .chart-ref {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>