BigScreenUI/src/components/echartsCom/mapEcharts.vue

<template>
    <div ref="mapEcharts" style="width: 100%;height: 100%;"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import gdGxJSON from './xnall.json'
const mapEcharts = ref(null)
const getImg = () => {
    return new URL(`/src/components/echartsCom/img/hover_bg.png`, import.meta.url).href;
}

const propsVal = defineProps({
    title: {//标题
        type: Object,
        default: {

        }
    },
    itemStyle: {//地图项样式
        type: Object,
        default: {
            areaColor: '#186894',//区域颜色
            shadowColor: '#2894c9',//边缘阴影颜色
            color: 'rgba(255, 255, 255, 1)'//文字颜色
        }
    },
    emphasisLabelStyle: {//鼠标移入 文本 label 高亮的样式  
        type: Object,
        default: {
            color: "rgba(255, 255, 255, 1)"
        }
    },
    emphasisItemStyle: {//鼠标移入 地图高亮样式
        type: Object,
        default: {
            areaColor: '#39baf6',
            shadowColor: '#2894c9',
        }
    },
    labelInfo: {
        type: Object,//地图标签配置 如 云南省等
        default: {
            show: true,
            color: 'rgba(255,255,255,0.6)',
            position: 'inside',
            distance: 0,
            fontSize: 10,
            rotate: 0,
        }
    },
    rippleEffect: {//点的闪烁配置
        type: Object,
        default: {
            number: 4,
            period: 4,
            scale: 4.5,
            brushType: 'fill'
        }
    },
    tooltipProps: {//鼠标移动提示框的样式
        type: Object,
        default: {
            show: false,//是否显示，默认不显示
            backgroundColor: '#fff'//提示框的背景色
        }
    },
    tooltipFormat: {//提示 格式
        type: Function,
        default: () => { }
    },
    itemColorFormat: {//颜色格式化
        type: Function,
        default: () => { }
    },

    seriesData: {//地图点标记数据
        type: Array,
        default: []
    }
})
const initEcharts = () => {
    echarts.registerMap('guangdong', gdGxJSON)
    nextTick(() => {
        const map = echarts.init(mapEcharts.value, null, {
            renderer: 'canvas',
        })
        const option = {
            title: propsVal.title,
            // 悬浮窗
            tooltip: {
                trigger: 'item',//触发条件
            },
            geo: {
                map: 'guangdong',
                zoom: 1,
                roam: 'move',
                label: propsVal.labelInfo,
                // 所有地图的区域颜色
                itemStyle: propsVal.itemStyle,
                emphasis: {
                    label: propsVal.emphasisLabelStyle,
                    itemStyle: propsVal.emphasisItemStyle
                },
                tooltip: {
                    ...propsVal.tooltipProps,
                    formatter: (params: any) => {
                        return propsVal.tooltipFormat(params)
                    }


                    /*                 (params: any) => {
                                        console.log("params11", params)
                                        const curItem = mapDataByProvice(params.name)
                                        let fromatStr =
                                            `<div style="background:url(${getImg()});width:120px;height:70px;background-size:contain;background-repeat:no-repeat;">
                                                <div style="width: 100px;height: 90px;padding-top:4px;">
                                                    <div  style="width: 100px;height: 14px;box-sizing: content-box;padding-bottom: 8px;text-align: right;">
                                                        ${curItem.selfCount}
                                                    </div>
                                                    <div  style="width: 100px;height: 14px;box-sizing: content-box;padding-bottom: 8px;text-align: right;">
                                                        ${curItem.toCount}
                                                    </div>
                                                    <div  style="width: 100px;height: 14px;box-sizing: content-box;padding-bottom: 8px;text-align: right;">
                                                        ${curItem.inCount}
                                                    </div>
                                                </div>        
                                            </div>
                                        `
                                        return fromatStr
                                    } */
                }
            },
            series: [
                {
                    name: 'Top 5',
                    type: 'effectScatter',
                    colorBy: 'series',
                    effectType: 'ripple',
                    showEffectOn: 'render',
                    rippleEffect: propsVal.rippleEffect,
                    itemStyle: {
                        color: (params: any) => {
                            return propsVal.itemColorFormat(params)

                        }
                    },


                    /*                     {
                                            color: (params: any) => {
                                                console.log("params001", params)
                                                if (params.value[2] > 0 && params.value[2] <= 100) {
                                                    return '#00ff31';
                                                } else if (params.value[2] > 100 && params.value[2] <= 200) {
                                                    return '#f00';
                                                } else if (params.value[2] > 200 && params.value[2] <= 300) {
                                                    return '#0ff';
                                                } else if (params.value[2] > 300 && params.value[2] <= 400) {
                                                    return '#ff0';
                                                }
                                            }
                                        }, */
                    coordinateSystem: 'geo',
                    data: propsVal.seriesData

                    /*  [{ name: '肇庆市', value: [112.48461, 23.05196, 100] },
                     { name: '佛山市', value: [110.130214, 23.018978, 200] },
                     { name: '广州', value: [115.261081, 23.139856, 300] },
                     { name: '南宁', value: [107.45, 22.139856, 400] },
                     { name: '贵阳', value: [106.7, 26.36, 200] },
                     { name: '昆明', value: [102.33, 24.23, 300] }] */

                }
            ],
        }
        map.setOption(option)
    })
}
/* const mapDataByProvice = (provinceName: String) => {
    let listData = [
        {
            name: "广东省",
            selfCount: 123,
            toCount: 300,
            inCount: 987
        },
        {
            name: "广西壮族自治区",
            selfCount: 23,
            toCount: 55,
            inCount: 278
        },
    ]
    const curItem: any = listData.find(ele => ele.name == provinceName)
    return curItem
} */
onMounted(() => {
    console.log("propsval", propsVal)
    initEcharts()
})

</script>

<style scoped>
.map-echart {
    height: 600px;
    width: 900px;
}
</style>