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

<!-- 地图组件 -->
<template>
    <div style="position: relative">
        <div class="bars_w" ref="chartMap" id="chartMap"></div>
        <span @click="circle" v-show="showCircle" class="iconfont icon-back" style="color: #003078"></span>
    </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref, watch, onMounted, defineEmits } from 'vue'
import * as echarts from 'echarts4'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const props = defineProps(['options'])
const myCharts = ref()
const showCircle = ref(false)

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

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

const GetEchar = async (name: string) => {
    let chartDom = document.getElementById('chartMap')
    myCharts.value?.resize()
    myCharts.value = echarts.init(chartDom)
    echarts.registerMap('china', await fetchConfig(name)) //注册可用的地图
    let option = {
        title: {
            left: 'center',
            top: '3%',
            ...props.options.title
        },
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow',
                label: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            textStyle: {
                color: '#fff',
                fontStyle: 'normal',
                opacity: 0.35,
                fontSize: 14
            },
            backgroundColor: 'rgba(0,0,0,0.35)',
            ...(props.options.tooltip || null)
        },
        legend: {
            orient: 'vertical',
            left: 26,
            bottom: 40,
            itemWidth: 16,
            itemHeight: 16,

            ...(props.options.legend || null)
        },
        color: [
            ...(props.options.color || ''),
            '#07CCCA ',
            '#00BFF5',
            '#FFBF00',
            '#77DA63',
            '#D5FF6B',
            '#Ff6600',
            '#FF9100',
            '#5B6E96',
            '#66FFCC',
            '#B3B3B3'
        ],
        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 // 隐藏文字
                    }
                }
            ]
        },
        ...props.options.options
    }

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

    // 点击事件
    myCharts.value.off('click')
    myCharts.value.on('click', (e: any) => {
        if (name == '中国' && e.componentIndex == 0) {
            GetEchar(e.name)
            MapReturn(e.name)
            showCircle.value = true
            // console.log('🚀 ~ file: MyEchartMap.vue:156 ~ myCharts.value.on ~  MapReturn(e.name):', MapReturn(e.name))
        }
    })
}

const MapReturn = (name: string) => {
    let area = dictData.state.area[0].children
    let list = {}
    // break;
    for (let i = 0; i < area.length; i++) {
        if (area[i].name == name) {
            list = area[i]
            break
        } else {
            list = dictData.state.area[0]
        }
    }

    emit('getRegionByRegion', list)
}
// 返回
const circle = () => {
    GetEchar('中国')
    showCircle.value = false
}
const resizeHandler = () => {
    myCharts.value?.resize()
}
onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeHandler)
    myCharts.value?.dispose()
})
defineExpose({ GetEchar })
watch(
    () => props.options,
    (newVal, oldVal) => {
        // GetEchar('中国')
    }
)
</script>

<style lang="scss" scoped>
.bars_w {
    width: 100%;
    height: 100%;
}
.iconfont {
    cursor: pointer;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-size: 20px;
}
</style>