✨ map.json

src/assets/map/710000.json

@@ -0,0 +1 @@
+{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"adcode":710000,"name":"台湾省","center":[121.509062,25.044332],"centroid":[120.971485,23.749452],"childrenNum":0,"level":"province","acroutes":[100000],"parent":{"adcode":100000}},"geometry":{"type":"MultiPolygon","coordinates":[[[[120.443558,22.441245],[120.517584,22.408536],[120.569903,22.361728],[120.640505,22.241347],[120.659209,22.15432],[120.662001,22.066983],[120.651464,22.033165],[120.667691,21.983168],[120.70157,21.927065],[120.743246,21.915569],[120.78155,21.923957],[120.85468,21.883333],[120.87291,21.897387],[120.866482,21.98436],[120.907315,22.033208],[120.904154,22.119757],[120.914955,22.302718],[120.981658,22.528305],[121.015009,22.584168],[121.033292,22.650725],[121.078498,22.669656],[121.170544,22.723133],[121.210481,22.770665],[121.237931,22.836327],[121.324708,22.945666],[121.354687,23.01006],[121.370388,23.084347],[121.409535,23.102669],[121.430294,23.137196],[121.415015,23.195973],[121.440358,23.272096],[121.479558,23.3223],[121.497788,23.419789],[121.521497,23.483198],[121.523078,23.538708],[121.587778,23.76102],[121.621604,23.92075],[121.659381,24.006893],[121.639992,24.064276],[121.643838,24.097713],[121.678085,24.133906],[121.689044,24.174401],[121.809172,24.339055],[121.826717,24.423579],[121.867498,24.478978],[121.885464,24.529677],[121.892524,24.617912],[121.862598,24.671515],[121.837993,24.76015],[121.845053,24.836269],[121.932883,24.938645],[122.012178,25.001469],[121.980776,25.03079],[121.947425,25.031955],[121.917077,25.137908],[121.842155,25.135332],[121.782407,25.160425],[121.750531,25.160716],[121.707327,25.191493],[121.700319,25.226913],[121.655324,25.241859],[121.623026,25.294694],[121.584986,25.308926],[121.535038,25.307515],[121.444415,25.270624],[121.413487,25.238912],[121.371864,25.159885],[121.319281,25.140691],[121.209322,25.127104],[121.133135,25.078728],[121.102102,25.075153],[121.024704,25.040479],[121.009688,24.993649],[120.960899,24.940227],[120.908475,24.852012],[120.892299,24.767526],[120.823753,24.688321],[120.762371,24.658335],[120.688661,24.600678],[120.64277,24.490172],[120.589187,24.432354],[120.546299,24.370413],[120.521009,24.312038],[120.470534,24.24259],[120.451461,24.182691],[120.392029,24.11824],[120.316158,23.984881],[120.278276,23.927798],[120.245768,23.840553],[120.175377,23.807385],[120.102773,23.700981],[120.094817,23.587466],[120.121741,23.504664],[120.107831,23.341264],[120.081434,23.29191],[120.018947,23.073115],[120.029537,23.048623],[120.131382,23.002118],[120.149138,22.896715],[120.200403,22.721101],[120.274272,22.560181],[120.297191,22.531315],[120.443558,22.441245]]],[[[124.542984,25.903911],[124.586346,25.913777],[124.572805,25.93974],[124.541825,25.931031],[124.542984,25.903911]]],[[[123.445286,25.725966],[123.472104,25.713024],[123.508933,25.723237],[123.514834,25.751226],[123.483063,25.768587],[123.444496,25.746514],[123.445286,25.725966]]],[[[119.64597,23.55091],[119.701081,23.550657],[119.678057,23.600041],[119.610089,23.603953],[119.594388,23.577245],[119.566306,23.584732],[119.562565,23.530377],[119.573788,23.505885],[119.609141,23.503864],[119.64597,23.55091]]],[[[123.667207,25.914066],[123.707092,25.916873],[123.678008,25.938667],[123.667207,25.914066]]],[[[119.506031,23.625567],[119.505241,23.575814],[119.472416,23.557136],[119.523207,23.563699],[119.525578,23.624895],[119.506031,23.625567]]],[[[119.49739,23.386683],[119.495125,23.350156],[119.516885,23.349903],[119.49739,23.386683]]],[[[119.557454,23.666474],[119.604083,23.616989],[119.615516,23.660925],[119.586485,23.675974],[119.557454,23.666474]]],[[[121.46823,22.676644],[121.476502,22.64166],[121.513541,22.631833],[121.5147,22.67639],[121.46823,22.676644]]],[[[121.510538,22.087185],[121.507693,22.048523],[121.534089,22.022146],[121.594522,21.995382],[121.604586,22.022699],[121.575028,22.037122],[121.575607,22.084421],[121.510538,22.087185]]],[[[122.097533,25.500168],[122.093581,25.47183],[122.124825,25.475932],[122.097533,25.500168]]],[[[119.421467,23.216684],[119.421309,23.18935],[119.453396,23.217697],[119.421467,23.216684]]],[[[120.355042,22.327259],[120.395454,22.342287],[120.383072,22.355573],[120.355042,22.327259]]]]}}]}

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

@@ -0,0 +1,107 @@
+<template>
+    <div ref="chartDom" class="map-chart"></div>
+</template>
+
+<script lang='ts' setup>
+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'
+
+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)
+        })
+    })
+    initMap({data})
+})
+
+function initMap(chartData: any) {
+    const chart = echarts.init(chartDom.value as HTMLElement);
+    chart.clear();
+    echarts.registerMap('sf', chinaJson as any)
+    const option = {
+        tooltip: {
+            triggerOn: "mousemove",
+            formatter: function (e: any) {
+                return e.name + "<br />" + (e.value || 0) + '所'
+            }
+        },
+        visualMap: {
+            show: false,
+            min: 0,
+            max: 100,
+            left: 'left',
+            top: 'bottom',
+            orient: 'vertical',
+            text: ['多', '少'],
+            realtime: false,
+            calculable: false,
+            inRange: {
+                color: ['#006080', '#abd9ef']
+            }
+        },
+        geo: {
+            map: "sf",
+            roam: false,
+            scaleLimit: {
+                min: 1,
+                max: 2
+            },
+            zoom: 1,
+            top: '0%',
+            label: {
+                show: true,
+                fontSize: 12,
+                color: "#ffffff",
+                textBorderWidth: 1,
+                textBorderColor: '#006080',
+                emphasis: {
+                    color: "#006080",
+                    textBorderColor: '#ffffff',
+                }
+            },
+            itemStyle: {
+                borderColor: "rgba(255, 255, 255, .2)",
+                emphasis: {
+                    areaColor: "#f8b300"
+                }
+            }
+        },
+        series: [{
+            name: "确诊病例",
+            type: "map",
+            mapType: 'sf',
+            geoIndex: 0,
+            data: chartData.data
+        }]
+    }
+
+    chart.setOption(option)
+    setTimeout(() => {
+        chart.resize()
+    }, 0)
+    window.addEventListener('resize', () => {
+        chart.resize()
+    })
+    chart.on('click', (params: any) => {
+        router.push('/system-manage/hospitals-map')
+    })
+}
+</script>
+
+<style lang='scss' scoped>
+.map-chart {
+    width: 100%;
+    height: 100%;
+}
+
+</style>

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

@@ -1,12 +1,15 @@
 <template>
-    <div ref="chartDom" class="map-chart" style="width: 100%;height: 100%;"></div>
+    <div ref="chartDom" class="map-chart"></div>
 </template>
 
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import * as echarts from 'echarts'
 import chinaJson from '@/assets/map/china.json'
 
+const router = useRouter()
+
 const chartDom = ref()
 
 onMounted(() => {
@@ -28,7 +31,7 @@ function initMap(chartData: any) {
         tooltip: {
             triggerOn: "mousemove",
             formatter: function (e: any) {
-                return e.name + "<br />" + e.value + '所'
+                return e.name + "<br />" + (e.value || 0) + '所'
             }
         },
         visualMap: {
@@ -52,8 +55,8 @@ function initMap(chartData: any) {
                 min: 1,
                 max: 2
             },
-            zoom: 1.6,
+            zoom: 1.7,
-            top: 150,
+            top: '31%',
             label: {
                 show: true,
                 fontSize: 12,
@@ -73,7 +76,6 @@ function initMap(chartData: any) {
             }
         },
         series: [{
-            name: "确诊病例",
             type: "map",
             mapType: 'china',
             geoIndex: 0,
@@ -82,14 +84,22 @@ function initMap(chartData: any) {
     }
 
     chart.setOption(option)
-    chart.resize()
+    setTimeout(() => {
+        chart.resize()
+    }, 0)
     window.addEventListener('resize', () => {
         chart.resize()
     })
     chart.on('click', (params: any) => {
-        console.log('--------', params)
+        router.push('/system-manage/hospitals-map')
     })
 }
 </script>
 
-<style lang='scss' scoped></style>
+<style lang='scss' scoped>
+.map-chart {
+    width: 100%;
+    height: 100%;
+}
+
+</style>

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

@@ -109,7 +109,9 @@ function initChart(chartData: any) {
         }],
     }
     chart.setOption(option)
-    chart.resize()
+    setTimeout(() => {
+        chart.resize()
+    }, 0)
     window.addEventListener('resize', () => {
         chart.resize()
     })

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

@@ -1,14 +1,30 @@
 <template>
-    <div>
+    <div class="hospitals-map-left">
-
+        <div class="left-box">
+            <AreaMapChart />
+        </div>
+        <div class="right-box">
+            <ul>
+                <li></li>
+            </ul>
+        </div>
     </div>
 </template>
 
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import MapChart from './chart/map-chart.vue'
+import AreaMapChart from './chart/area-map-chart.vue'
 
 </script>
 
 <style lang='scss' scoped>
-
+.hospitals-map-left {
+    width: 100%;
+    height: 100%;
+    .left-box {
+        width: 100%;
+        height: 100%;
+    }
+}
 </style>

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

@@ -12,7 +12,7 @@
             <div class="chart-total-box swing_skew_2">
                 <div class="title">用户数据统计</div>
                 <div class="chart block-border">
-                    <userChart />
+                    <UserChart />
                 </div>
             </div>
         </div>
@@ -27,7 +27,7 @@
                 </div>
             </div>
             <div class="map-box block-border swing_skew_1">
-                <mapChart />
+                <MapChart />
             </div>
         </div>
     </div>
@@ -37,8 +37,8 @@
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import SystemLogs from "@/components/system-logs.vue"
-import userChart from './chart/user-chart.vue'
+import UserChart from './chart/user-chart.vue'
-import mapChart from './chart/map-chart.vue'
+import MapChart from './chart/map-chart.vue'
 
 const router = useRouter()