预警表格样式修改

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 } 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();
+    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);
     }
-);
 
-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);
-  myChart.setOption(options);
-  window.addEventListener('resize', () => {
-    myChart.resize();
-  });
-}
+    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();
+        });
+    }
 </script>
 <style scoped lang="less">
-.inner {
-  width: 90%;
-  margin: 0 auto;
-  height: calc(100% - 40px);
-}
+    .inner {
+        width: 100%;
+        margin: 0 auto;
+        height: calc(100% - 40px);
+    }
 </style>

src/components/item-d/pieCharts.ts

@@ -3,8 +3,8 @@ export function screenPie(chartData, total, color) {
         title: {
             text: '总人数',
             subtext: total + '',
-            x: 'center',
-            y: '35%',
+            x: '38%',
+            y: '42%',
             textStyle: {
                 fontSize: 14,
                 color: '#ffffff',
@@ -27,7 +27,7 @@ export function screenPie(chartData, total, color) {
             borderColor: '#1b7ef2',
         },
         legend: {
-            left: '80%',
+            left: '74%',
             top: 'center',
             orient: 'vertical',
             icon: 'circle',
@@ -40,7 +40,8 @@ export function screenPie(chartData, total, color) {
         series: [
             {
                 type: 'pie',
-                radius: ['50%', '90%'],
+                radius: ['50%', '86%'],
+                center: ['42%', '55%'],
                 avoidLabelOverlap: false,
                 label: {
                     show: true,