admin-govern/src/components/echarts/MyEchartMap.vue

<!-- 地图组件 -->
<template>
    <div class="bars_w" ref="chartMap" id="chartMap"></div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref, nextTick, onMounted, defineEmits } from 'vue'
import * as echarts from 'echarts'

import chinaJson from '@/assets/map/zh.json'

import axios from 'axios'
const props = defineProps({
    datas: {
        type: Array,
        required: true
    }
})

const myCharts = ref()

const mapJson = ref()

const fetchConfig = async (name: string) => {
    const res = await import(`../../assets/map/${name}.json`)
    return res.default
    // GetEchar(res.default)
}
// fetchConfig()

const emit = defineEmits(['getRegionByRegionId'])
onMounted(() => {
    GetEchar()
})

const GetEchar = async () => {
    let chartDom = document.getElementById('chartMap')
    myCharts.value = echarts.init(chartDom)

    echarts.registerMap('china', await fetchConfig('中国')) //注册可用的地图
    var option = {
        geo: {
            map: 'china',
            zoom: 1,
            roam: true,
            label: {
                normal: {
                    show: true,
                    fontSize: '14',
                    color: 'rgba(0,0,0,0.7)'
                }
            },

            itemStyle: {
                normal: {
                    color: 'rgba(51, 69, 129, .8)', //地图背景色
                    borderColor: '#999999',
                    borderWidth: 1,
                    areaColor: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(147, 135, 148, .2)' // 100% 处的颜色
                            }
                        ],
                        globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(128, 217, 248, 1)',
                    // shadowColor: 'rgba(255, 255, 255, 1)',
                    shadowOffsetX: -2,
                    shadowOffsetY: 2,
                    shadowBlur: 10
                },
                emphasis: {
                    areaColor: '#ccc',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    borderWidth: 0
                }
            },
            regions: [
                {
                    name: '南海诸岛',
                    itemStyle: {
                        // 隐藏地图
                        normal: {
                            opacity: 0 // 为 0 时不绘制该图形
                        }
                    },
                    label: {
                        show: false // 隐藏文字
                    }
                }
            ]
        }
    }

    myCharts.value.setOption(option)
    window.addEventListener('resize', resizeHandler)

    //设置默认选中高亮部分
    let index = 11
    myCharts.value.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index
    })

    // 点击事件
    myCharts.value.on('click', e => {
        emit('getRegionByRegionId', e.data)
        myCharts.value.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: 0
        })
        if (e.dataIndex != index) {
            myCharts.value.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: index
            })
        }
        myCharts.value.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: e.dataIndex
        })
        index = e.dataIndex
    })
    // 当鼠标离开时
    myCharts.value.on('mouseout', function (e) {
        myCharts.value.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: index
        })
    })
}
const resizeHandler = () => {
    myCharts.value?.resize()
}
onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeHandler)
    myCharts.value?.dispose()
})
</script>

<style lang="scss" scoped>
.bars_w {
    width: 100%;
    height: 100%;
}
</style>