BigScreenUI/src/components/echartsCom/mapEcharts.vue

<template>
    <div :id="'mapEcharts' + idType" style="width: 100%;height: 100%;" ></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
const propsVal: any = defineProps({
    idType: {
        type: String,
        default: '0'
    },
    jsonData: {
        type: Object,
        default: {

        }
    },
    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: []
    },
    effectScatterCallBack: {//effectScatter 点击事件
        type: Function,
        default: () => { }
    },
})
const initEcharts = () => {
    echarts.registerMap('guangdong', propsVal.jsonData)
    nextTick(() => {
        const domitem = document.getElementById("mapEcharts" + propsVal.idType)
        const map = echarts.init(domitem, null, {
            renderer: 'canvas',
        })
        const option = {
            title: propsVal.title,
            // 悬浮窗
            tooltip: {
                trigger: 'item',//触发条件
            },
            geo: {
                map: 'guangdong',
                zoom: 1,
                roam: '',
                label: propsVal.labelInfo,
                // 所有地图的区域颜色
                itemStyle: propsVal.itemStyle,
                emphasis: {
                    label: propsVal.emphasisLabelStyle,
                    itemStyle: propsVal.emphasisItemStyle
                },
                tooltip: {
                    ...propsVal.tooltipProps,
                    formatter: (params: any) => {
                        return propsVal.tooltipFormat(params)
                    }
                }
            },
            series: [
                {
                    name: 'Top 5',
                    type: 'effectScatter',
                    colorBy: 'series',
                    effectType: 'ripple',
                    showEffectOn: 'render',
                    rippleEffect: propsVal.rippleEffect,
                    itemStyle: {
                        color: (params: any) => {
                            return propsVal.itemColorFormat(params)

                        }
                    },
                    coordinateSystem: 'geo',
                    data: propsVal.seriesData,
                },
                {
                    name: 'eventDom',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: propsVal.seriesData,
                    symbolSize: 32,
                    itemStyle: {
                        color:"rgba(255,255,255,0)"
                    },
                },
            ],
        }
        map.setOption(option)
        chartClickEventListener(map)
    })
}
onMounted(() => {
    console.log("propsval", propsVal)
    initEcharts()

})
const chartClickEventListener = (mychart: any) => {
    mychart.on("click", (parmas: any) => {
        propsVal.effectScatterCallBack(parmas)
    })
}


const chagneJSON = (item: any) => {
    console.log("propsval", propsVal)
    propsVal.idType = item.navId
    setTimeout(() => {
        initEcharts()
    })
}
defineExpose({
    chagneJSON
})

</script>

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