update：大屏调整

src/components/body-d-left/bodyLeftHooks.ts

@@ -82,31 +82,180 @@ export function useSpin() {
 
 export const hospitalList = [
     {
-        title: '兴隆医院',
+        name: '泾河医院',
-        key: 'tangdu',
-    },
-    {
-        title: '泾河医院',
         key: 'zhigong',
+        value: '',
     },
     {
-        title: '宁夏宝石花医院',
+        name: '兴隆医院',
+        key: 'tangdu',
+        value: '',
+    },
+    {
+        name: '宁夏宝石花医院',
         key: 'yangehu',
+        value: '',
     },
     {
-        title: '庆阳医院',
+        name: '延安市人民医院',
-        key: 'changan',
-    },
-    {
-        title: '延安市人民医院',
         key: 'yananshi',
+        value: '',
     },
     {
-        title: '西京医院',
+        name: '西京医院',
         key: 'xijing',
+        value: '',
+    },
+    {
+        name: '庆阳医院',
+        key: 'changan',
+        value: '',
     },
 ];
 
+export function useHospitalList() {
+    const radarList = ref(hospitalList);
+
+    function setRadarList(res) {
+        radarList.value.forEach((item) => {
+            const { key } = item;
+            item.value = res[key];
+        });
+    }
+
+    return {
+        radarList,
+        setRadarList,
+    };
+}
+
+/**
+ * @Description:体检医院雷达图
+ * @date 2023/6/27
+ * @param indicator:名称及最大值
+ * @param countList:数据项
+ */
+export const radarCharts = ({ indicator, countList }) => {
+    return {
+        // tooltip: {
+        //     backgroundColor: 'rgba(50,50,50,0.7)',
+        //     borderColor: 'rgba(50,50,50,0.7)',
+        //     textStyle: {
+        //         color: '#fff',
+        //     },
+        //     //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
+        //     confine: true,
+        //     enterable: true, //鼠标是否可以移动到tooltip区域内
+        //     valueFormatter: (params) => {},
+        // },
+        grid: {
+            top: '1%',
+            left: '5%',
+            right: '5%',
+            bottom: '1%',
+            containLabel: true,
+        },
+        radar: {
+            name: {
+                textStyle: {
+                    color: '#fff',
+                    fontSize: 14,
+                },
+            },
+            shape: 'polygon',
+            center: ['50%', '50%'],
+            radius: '65%',
+            //坐标系起始角度，也就是第一个指示器轴的角度。
+            startAngle: 360,
+            scale: true,
+            axisLine: {
+                lineStyle: {
+                    color: '#597589',
+                },
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    width: 1,
+                    color: '#597589', // 设置网格的颜色
+                },
+            },
+            indicator: indicator,
+            splitArea: {
+                show: false,
+            },
+            axisName: {
+                formatter: function (params) {
+                    let dataIndex = indicator.findIndex((item) => item.name === params);
+                    return `${params}\n${countList[dataIndex]}`;
+                },
+                color: '#ffffff',
+            },
+        },
+        polar: {
+            center: ['50%', '50%'], // 默认全局居中
+            radius: '0%',
+        },
+        angleAxis: {
+            min: 0,
+            interval: 5,
+            clockwise: false,
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+            },
+            splitLine: {
+                show: false,
+            },
+        },
+        radiusAxis: {
+            min: 0,
+            interval: 20,
+            splitLine: {
+                show: false,
+            },
+        },
+        series: [
+            {
+                name: '本年度健康体检',
+                type: 'radar',
+                symbol: 'circle', // 拐点的样式，还可以取值'rect','angle'等
+                symbolSize: 10, // 拐点的大小
+                itemStyle: {
+                    normal: {
+                        color: '#05D5FF',
+                    },
+                },
+                areaStyle: {
+                    normal: {
+                        color: '#05D5FF',
+                        opacity: 0.5,
+                    },
+                },
+                lineStyle: {
+                    width: 2,
+                    color: '#05D5FF',
+                },
+                label: {
+                    normal: {
+                        show: false,
+                    },
+                },
+                data: [
+                    {
+                        value: countList,
+                    },
+                ],
+            },
+        ],
+    };
+};
+
 export function barOption(xData, ydata) {
     function maxCount() {
         if (ydata.length) {

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="RadarCharts"></div>
-                    <div class="ct">
+                <!--                <div class="physical-item" v-for="(item, i) in hospitalList" :key="i" :class="[i < 3 ? 'b1' : 'b2']">-->
-                        <div class="value">{{ countData[item.key] || '/' }}</div>
+                <!--                    <div class="ct">-->
-                        <div class="label">{{ item.title }}</div>
+                <!--                        <div class="value">{{ countData[item.key] || '/' }}</div>-->
-                    </div>
+                <!--                        <div class="label">{{ item.title }}</div>-->
-                </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%;
+            height: 100%;
-            padding-top: 6%;
+            //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%;

src/components/chinaMap/chinaHooks.ts

@@ -133,7 +133,7 @@ export const legendList = [
     { img: legend3, text: '救护车' },
     { img: legend4, text: '合作医院' },
     { img: legend5, text: '地方医院' },
-    { img: legend6, text: '直升机' },
+    // { img: legend6, text: '直升机' },
 ];
 
 /**