⚡️ 地图页面，添加静态资源文件

src/axios/index.ts

@@ -3,7 +3,7 @@ import axios from "axios";
 // const HOST = 'http://127.0.0.1:3001';
 const HOST = 'http://123.57.147.184:3001';
 
-export const get = (url, params, success) => {
+export const get = (url: any, params: any, success: any) => {
     axios.get(HOST + url, params)
         .then(res => {
             success(res);
@@ -12,7 +12,7 @@ export const get = (url, params, success) => {
             success(err);
         });;
 };
-export const post = (url, params, success) => {
+export const post = (url: any, params: any, success: any) => {
     axios.post(HOST + url, params)
         .then(res => {
             success(res);
@@ -21,3 +21,6 @@ export const post = (url, params, success) => {
             success(err);
         });
 };
+export const getMapJson = (name: string) => {
+    return axios.post('/static/json/' + name)
+}

src/views/system-manage/chart/city-map-chart.vue

@@ -6,29 +6,55 @@
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import * as echarts from 'echarts'
-import chinaJson from '@/assets/map/120000_full.json'
+import { getMapJson } from '@/axios/index'
 
 const router = useRouter()
 
 const chartDom = ref()
 
 onMounted(() => {
-    // console.log(allChinaJson)
+
-    const data: any = []
-    chinaJson.features.forEach((item: any) => {
-        data.push({
-            name: item.properties.name,
-            value: Math.ceil(Math.random() * 100)
 })
-    })
+defineExpose({
-    initMap({data})
+    setMap
 })
 
-function initMap(chartData: any) {
+function setMap(name: string) {
+    getMapJson(name + '_full.json').then((res: any) => {
+        const chinaJson = res.data
+        const data: any = []
+        const markData: any = []
+        chinaJson.features.forEach((item: any, index: number) => {
+            const obj = {
+                name: item.properties.name,
+                value: Math.ceil(Math.random() * 30)
+            }
+            data.push(obj)
+            markData.push({
+                name: obj.name,
+                value: item.properties.center.concat(obj.value),
+                itemStyle: {
+                    color: index === 0 ? 'red' : '#ffffff',
+                    opacity: 1
+                }
+            })
+            
+        })
+        initMap({ data, markData }, chinaJson)
+    })
+}
+function initMap(chartData: any, chinaJson: any) {
     const chart = echarts.init(chartDom.value as HTMLElement);
     chart.clear();
     echarts.registerMap('sf', chinaJson as any)
+    let nums = [] as any
+    chartData.data.forEach((item: any) => {
+        nums.push(Number(item.value))
+    })
+    const numMax = Math.max(...nums)
+    const numMin = Math.min(...nums)
     const option = {
+        color: ['#ffffff'],
         tooltip: {
             triggerOn: "mousemove",
             formatter: function (e: any) {
@@ -36,22 +62,25 @@ function initMap(chartData: any) {
             }
         },
         visualMap: {
-            show: false,
+            show: true,
             min: 0,
-            max: 100,
+            max: numMax,
-            left: 'left',
+            left: 100,
             top: 'bottom',
-            orient: 'vertical',
+            orient: 'horizontal',
-            text: ['多', '少'],
+            text: [numMax + '所', numMin + '所'],
+            itemWidth: 40,
+            itemHeight: 300,
             realtime: false,
             calculable: false,
             inRange: {
                 color: ['#006080', '#abd9ef']
-            }
+            },
+            seriesIndex: 0 // 仅使第一个生效
         },
         geo: {
             map: "sf",
-            roam: false,
+            roam: true,
             scaleLimit: {
                 min: 1,
                 max: 2
@@ -77,11 +106,25 @@ function initMap(chartData: any) {
             }
         },
         series: [{
-            name: "确诊病例",
             type: "map",
             mapType: 'sf',
             geoIndex: 0,
             data: chartData.data
+        }, {
+            type: 'scatter',
+            colorBy: 'data',
+            coordinateSystem: 'geo',
+            symbol: 'circle',
+            symbolSize: 16,
+            symbolOffset: [0, 20],
+            label: {
+                show: false,
+            },
+            zlevel: 2,
+            data: chartData.markData,
+            tooltip: {
+                show: false
+            }
         }]
     }
 
@@ -103,5 +146,4 @@ function initMap(chartData: any) {
     width: 100%;
     height: 100%;
 }
-
 </style>

src/views/system-manage/chart/map-chart.vue

@@ -10,6 +10,11 @@ import chinaJson from '@/assets/map/china.json'
 
 const router = useRouter()
 
+const emit = defineEmits(['mapClick'])
+const props = defineProps({
+    type: String
+})
+
 const chartDom = ref()
 
 onMounted(() => {
@@ -17,7 +22,8 @@ onMounted(() => {
     chinaJson.features.forEach((item: any) => {
         data.push({
             name: item.properties.name,
-            value: Math.ceil(Math.random() * 100)
+            value: Math.ceil(Math.random() * 100),
+            adcode: item.properties.adcode
         })
     })
     initMap({data})
@@ -27,6 +33,12 @@ function initMap(chartData: any) {
     const chart = echarts.init(chartDom.value as HTMLElement);
     chart.clear();
     echarts.registerMap('china', chinaJson as any);
+    let nums = [] as any
+    chartData.data.forEach((item: any) => {
+        nums.push(Number(item.value))
+    })
+    const numMax = Math.max(...nums)
+    const numMin = Math.min(...nums)
     const option = {
         tooltip: {
             triggerOn: "mousemove",
@@ -35,22 +47,25 @@ function initMap(chartData: any) {
             }
         },
         visualMap: {
-            show: false,
+            show: props.type === 'home' ? false : true,
             min: 0,
-            max: 100,
+            max: numMax,
-            left: 'left',
+            left: 100,
             top: 'bottom',
-            orient: 'vertical',
+            orient: 'horizontal',
-            text: ['多', '少'],
+            text: [numMax + '所', numMin + '所'],
+            itemWidth: 40,
+            itemHeight: 300,
             realtime: false,
             calculable: false,
             inRange: {
                 color: ['#006080', '#abd9ef']
-            }
+            },
+            seriesIndex: 0 // 仅使第一个生效
         },
         geo: {
             map: "china",
-            roam: false,
+            roam: props.type === 'home' ? false : true,
             scaleLimit: {
                 min: 1,
                 max: 2
@@ -91,7 +106,7 @@ function initMap(chartData: any) {
         chart.resize()
     })
     chart.on('click', (params: any) => {
-        router.push('/system-manage/hospitals-map')
+        emit('mapClick', params)
     })
 }
 </script>

src/views/system-manage/hospitals-map.vue

@@ -1,11 +1,16 @@
 <template>
     <div class="hospitals-map-left">
         <div class="left-box">
-            <AreaMapChart />
+            <CityMapChart ref="cityMapChartRef" v-if="isCityMap" />
+            <MapChart v-else @mapClick="setCityMap" />
         </div>
         <div class="right-box">
-            <ul>
+            <p class="title">{{ citys ? citys.n : '各省' }}数据统计</p>
-                <li></li>
+            <ul v-if="citys">
+                <li v-for="(item, key) in citys.c">{{ item.n }}：{{ item.t }}所</li>
+            </ul>
+            <ul v-else>
+                <li v-for="(item, key) in chinaCitys" :key="key" @click="getObj(item, key)">{{ item.n }}：{{ item.t }}所</li>
             </ul>
         </div>
     </div>
@@ -13,18 +18,116 @@
 
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import AreaCityData from '@/assets/map/area_format_object.json'
 import MapChart from './chart/map-chart.vue'
-import AreaMapChart from './chart/area-map-chart.vue'
+import CityMapChart from './chart/city-map-chart.vue'
 
+const cityMapChartRef = ref()
+const isCityMap = ref(false)
+const citys = ref<any>()
+const chinaCitys = ref<any>()
+
+initChinaCitys()
+
+// 二级城市数据初始化
+function initChinaCitys() {
+    const cityData = AreaCityData as any
+    for (let key in cityData) {
+        cityData[key].n = cityNameFormatter(cityData[key].n)
+        cityData[key].t = Math.floor(Math.random() * 30)
+    }
+    chinaCitys.value = cityData
+}
+// 三级城市数据初始化
+function initCitys(data: any, adcode: string) {
+    data.n = cityNameFormatter(data.n)
+    for (let key in data.c) {
+        data.c[key].t = Math.floor(Math.random() * 10)
+    }
+    citys.value = data
+    // 显示二级地图
+    isCityMap.value = true
+    setTimeout(() => {
+        cityMapChartRef.value.setMap(adcode + '0000')
+    }, 0)
+}
+// 名称格式化
+function cityNameFormatter(name: string) {
+    if (['北京', '天津', '上海', '重庆'].some((n: string) => n === name)) name = name + '市'
+    else if (name === '广西') name = '广西壮族自治区'
+    else if (name === '内蒙古') name = '内蒙古自治区'
+    else if (name === '西藏') name = '西藏自治区'
+    else if (name === '宁夏') name = '宁夏回族自治区'
+    else if (name === '新疆') name = '新疆维吾尔自治区'
+    else if (!(['台湾', '香港', '澳门'].some((n: string) => n === name)) && name.slice(-1) !== '省' && name.slice(-1) !== '市' && name.slice(-1) !== '区') name = name + '省'
+    return name
+}
+
+const setCityMap = (params: any) => {
+    const key = String(params.data.adcode).slice(0, 2)
+    getObj(chinaCitys.value[key], key)
+}
+const getObj = (e: any, k: any) => {
+    let cityData: any
+    switch (e.n) {
+        case '北京市':
+            cityData = e.c['1101']
+            break;
+        case '天津市':
+            cityData = e.c['1201']
+            break;
+        case '上海市':
+            cityData = e.c['3101']
+            break;
+        case '重庆市':
+            cityData = Object.assign({}, e.c['5001'], e.c['5002'])
+            break;
+        default:
+            cityData = e
+            break;
+    }
+    initCitys(cityData, k)
+}
 </script>
 
 <style lang='scss' scoped>
 .hospitals-map-left {
     width: 100%;
     height: 100%;
+    display: flex;
+    align-items: center;
     .left-box {
-        width: 100%;
+        width: calc(100% - 350px);
         height: 100%;
     }
+
+    .right-box {
+        width: 300px;
+        height: calc(100% - 100px);
+        border: 4px solid $main-color;
+        &>.title {
+            width: 100%;
+            height: 60px;
+            line-height: 56px;
+            color: white;
+            font-size: 30px;
+            text-align: center;
+            background: $main-color;
         }
-</style>
+        ul {
+            width: 100%;
+            height: calc(100% - 70px);
+            overflow-x: hidden;
+            overflow-y: auto;
+            li {
+                cursor: pointer;
+                width: 100%;
+                color: $text2-color;
+                line-height: 20px;
+                padding: 10px 20px;
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+}</style>

src/views/system-manage/system-home.vue

@@ -27,7 +27,7 @@
                 </div>
             </div>
             <div class="map-box block-border swing_skew_1">
-                <MapChart />
+                <MapChart type="home" @mapClick="router.push('/system-manage/hospitals-map')" />
             </div>
         </div>
     </div>