update：大屏调整

src/components/body-d-left/threeL.vue

@@ -4,30 +4,32 @@
         <div class="inner">
             <div class="type-time">
                 <span
-                    :class="selectIndex === index ? 'select' : 'unSelect'"
                     v-for="(item, index) in timeTab"
                     :key="index"
+                    :class="selectIndex === index ? 'select' : 'unSelect'"
                     @click="handleSelect(index)"
                     >{{ item.name }}</span
                 >
             </div>
             <div class="physical-container">
                 <a-spin :spinning="spinning" class="spin"></a-spin>
-                <div class="physical-item" v-for="(item, i) in hospitalList" :key="i" :class="[i < 3 ? 'b1' : 'b2']">
-                    <div class="ct">
-                        <div class="value">{{ countData[item.key] || '/' }}</div>
-                        <div class="label">{{ item.title }}</div>
-                    </div>
-                </div>
+                <div class="RadarCharts"></div>
+                <!--                <div class="physical-item" v-for="(item, i) in hospitalList" :key="i" :class="[i < 3 ? 'b1' : 'b2']">-->
+                <!--                    <div class="ct">-->
+                <!--                        <div class="value">{{ countData[item.key] || '/' }}</div>-->
+                <!--                        <div class="label">{{ item.title }}</div>-->
+                <!--                    </div>-->
+                <!--                </div>-->
             </div>
         </div>
     </div>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
     import { onMounted, ref } from 'vue';
     import PublicTitle from '../publicTitle.vue';
     import { getDetail } from '/@/components/body-d-left/left.api';
-    import { hospitalList, useSpin, timeTab } from '/@/components/body-d-left/bodyLeftHooks';
+    import { hospitalList, useSpin, timeTab, useHospitalList, radarCharts } from '/@/components/body-d-left/bodyLeftHooks';
+    import * as echarts from 'echarts';
 
     const { setSpin, spinning } = useSpin();
     const selectIndex = ref(0);
@@ -44,7 +46,7 @@
         getList();
     });
 
-    const countData = ref({});
+    const { radarList, setRadarList } = useHospitalList();
 
     async function getList() {
         setSpin(true);
@@ -54,20 +56,33 @@
             if (code != 200) {
                 return;
             }
-            countData.value = result[0] || {};
+            setRadarList(result[0]);
+            initChart();
         } catch {
             setSpin(!spinning.value);
         }
     }
+
+    function initChart() {
+        const myChart = echarts.init(document.querySelector('.RadarCharts'));
+        let countList = radarList.value.map((item) => item.value);
+        let max = Math.max(...countList);
+        const indicator = radarList.value.map((item) => ({ name: item.name, max: max }));
+        const option = radarCharts({ indicator, countList });
+        myChart.setOption(option);
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
 </script>
-<style scoped lang="less">
+<style lang="less" scoped>
     .inner {
         height: calc(100% - 40px);
 
         .physical-container {
             width: 96%;
-            height: 92%;
-            padding-top: 6%;
+            height: 100%;
+            //padding-top: 6%;
             display: flex;
             flex-wrap: wrap;
             align-content: space-around;
@@ -79,6 +94,11 @@
                 top: 50%;
             }
 
+            .RadarCharts {
+                width: 100%;
+                height: 100%;
+            }
+
             .physical-item {
                 width: 33%;
                 height: 46%;
@@ -111,4 +131,4 @@
             }
         }
     }
-</style>
+</style>