mirror of
https://gitee.com/xiongmao1988/rax-medical.git
synced 2025-08-23 20:44:58 +08:00
✨ map.json
This commit is contained in:
gaofy
parent
022661b58b
commit
7f861a540f
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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]]]]}}]}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
top: 150,
|
||||
zoom: 1.7,
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -109,7 +109,9 @@ function initChart(chartData: any) {
|
|||
}],
|
||||
}
|
||||
chart.setOption(option)
|
||||
chart.resize()
|
||||
setTimeout(() => {
|
||||
chart.resize()
|
||||
}, 0)
|
||||
window.addEventListener('resize', () => {
|
||||
chart.resize()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 mapChart from './chart/map-chart.vue'
|
||||
import UserChart from './chart/user-chart.vue'
|
||||
import MapChart from './chart/map-chart.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user