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

<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 { getMapJson } from '@/utils/request'

const router = useRouter()

const chartDom = ref()

onMounted(() => {

})
defineExpose({
    setMap
})
function adcodeFormatter(code: string) {
    let str = code;
    if(str.slice(-2) === '00') str = str.slice(0, -2)
    return str
}
function setMap(name: string, totalData: any) {
    getMapJson(name + '_full.json').then((res: any) => {
        const chinaJson = res.data
        const data: any = []
        const markData: any = []
        // console.log(totalData)
        // console.log(chinaJson.features)
        chinaJson.features.forEach((item: any, index: number) => {
            const key = adcodeFormatter(item.properties.adcode + '')
            // console.log(key)
            const obj = {
                name: item.properties.name,
                value: totalData.c[key] ? totalData.c[key].t || 0 : 0
            }
            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) {
                return e.name + "<br />" + (e.value || 0) + '所'
            }
        },
        visualMap: {
            show: true,
            min: 0,
            max: numMax,
            left: 100,
            top: 'bottom',
            orient: 'horizontal',
            text: [numMax + '所', numMin + '所'],
            itemWidth: 40,
            itemHeight: 300,
            realtime: false,
            calculable: false,
            inRange: {
                color: ['#006080', '#abd9ef']
            },
            seriesIndex: 0 // 仅使第一个生效
        },
        geo: {
            map: "sf",
            roam: true,
            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: [{
            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
            }
        }]
    }

    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>