组件调整

src/components/item-d/item-d.vue

@@ -1,76 +1,76 @@
 <template>
-    <div>
-        <public-title :title="props.title">
-            <template #right>
-                {{ props.tips }}
-            </template>
-        </public-title>
-        <div class="inner" ref="healthChart"></div>
-    </div>
+  <div>
+    <public-title :title="props.title">
+      <template #right>
+        {{ props.tips }}
+      </template>
+    </public-title>
+    <div class="inner" ref="healthChart"></div>
+  </div>
 </template>
 <script setup lang="ts">
-    import PublicTitle from '/@/components/publicTitle.vue';
-    import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
-    import { useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
-    import { screenPie } from '/@/components/item-d/pieCharts.ts';
-    import { onMounted, ref, unref, watch } from 'vue';
-    import * as echarts from 'echarts';
+import PublicTitle from '/@/components/publicTitle.vue';
+import {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
+import {useHealth} from '/@/components/body-d-right/bodyRightHooks.ts';
+import {screenPie} from '/@/components/item-d/pieCharts.ts';
+import {onMounted, ref, unref, watch, defineProps} from 'vue';
+import * as echarts from 'echarts';
 
-    const props = defineProps({
-        title: {
-            type: String,
-            default: () => '',
-        },
-        data: {
-            type: Array,
-            default: () => [],
-        },
-        color: {
-            type: Array,
-            default: () => [],
-        },
-        tips: {
-            type: String,
-            default: () => '',
-        },
-    });
-    const healthChart = ref<HTMLElement>();
+const props = defineProps({
+  title: {
+    type: String,
+    default: () => '',
+  },
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  color: {
+    type: Array,
+    default: () => [],
+  },
+  tips: {
+    type: String,
+    default: () => '',
+  },
+});
+const healthChart = ref<HTMLElement>();
 
-    const { setSpin, spinning } = useSpin();
+const {setSpin, spinning} = useSpin();
 
-    onMounted(() => {
-        init();
-    });
+onMounted(() => {
+  init();
+});
 
-    watch(
-        () => props.data,
-        () => {
-            init();
-        }
-    );
-
-    const { healthData, getValue, setHealth } = useHealth();
-
-    async function init() {
-        // setHealth(props.data);
-        // const yData = unref(getValue);
-        // let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
-        initChart(props.data, 78, props.color);
+watch(
+    () => props.data,
+    () => {
+      init();
     }
+);
 
-    function initChart(chartData, total, color) {
-        let myChart = echarts.init(healthChart.value);
-        let options = screenPie(chartData, total, color);
-        myChart.setOption(options);
-        window.addEventListener('resize', () => {
-            myChart.resize();
-        });
-    }
+const {healthData, getValue, setHealth} = useHealth();
+
+async function init() {
+  // setHealth(props.data);
+  // const yData = unref(getValue);
+  // let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
+  initChart(props.data, 78, props.color);
+}
+
+function initChart(chartData, total, color) {
+  let myChart = echarts.init(healthChart.value);
+  let options = screenPie(chartData, total, color, '{d}%');
+  myChart.setOption(options);
+  window.addEventListener('resize', () => {
+    myChart.resize();
+  });
+}
 </script>
 <style scoped lang="less">
-    .inner {
-        width: 100%;
-        margin: 0 auto;
-        height: calc(100% - 40px);
-    }
+.inner {
+  width: 100%;
+  margin: 0 auto;
+  height: calc(100% - 40px);
+}
 </style>

src/components/item-d/pieCharts.ts

@@ -1,4 +1,4 @@
-export function screenPie(chartData, total, color) {
+export function screenPie(chartData, total, color, formatter) {
     return {
         title: {
             text: '总人数',
@@ -31,7 +31,7 @@ export function screenPie(chartData, total, color) {
             top: 'center',
             orient: 'vertical',
             icon: 'circle',
-            itemGap: 26,
+            itemGap: 16,
             textStyle: {
                 color: '#ffffff',
                 fontSize: 16,
@@ -46,7 +46,7 @@ export function screenPie(chartData, total, color) {
                 label: {
                     show: true,
                     position: 'inner',
-                    formatter: '{d}%',
+                    formatter: formatter,
                     color: '#ffffff',
                     fontSize: 14,
                 },