统计

src/views/manage/model/statistic/line-chart.vue

@@ -10,8 +10,6 @@ import * as echarts from 'echarts';
 
 const props = defineProps({
   data: <any>{},
-  color: {},
-  unit: {}
 })
 
 const {proxy} = getCurrentInstance()

src/views/manage/model/statistic/pie-chart.vue

@@ -0,0 +1,81 @@
+<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: <any>{},
+})
+
+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 = {
+    tooltip: {
+      trigger: 'item'
+    },
+    series: [
+      {
+        type: 'pie',
+        data: props.data,
+        radius: ['15%', '70%'],
+        padAngle: 1,
+        label: {
+          formatter: '{b}\n{d}%',
+          color: '#606266',
+          fontSize: 16,
+          fontFamily: 'PingFang SC',
+          fontWeight: 'bold',
+        },
+        labelLine: {
+          length2: 100,
+        }
+      }
+    ]
+  }
+  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="scss" scoped>
+.chart-main {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  .chart-ref {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>