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

<script setup lang="ts">
import * as echarts from 'echarts'
import gdGxJSON from './gd-gx.json'
import { ref, nextTick, onMounted } from 'vue'
const mapEcharts = ref(null)
const getImg = () => {
    return new URL(`/src/components/echartsCom/img/hover_bg.png`, import.meta.url).href;
}
const initEcharts = () => {
    echarts.registerMap('guangdong', gdGxJSON)
    nextTick(() => {
        const map = echarts.init(mapEcharts.value, null, {
            renderer: 'canvas',
        })
        const option = {
            title: {
                text: '广东-广西-地图',
                left: 'center',
            },
            // 悬浮窗
            tooltip: {
                trigger: 'item',//触发条件
            },
            geo: {
                map: 'guangdong',
                zoom: 1,
                roam: 'move',
                label: {
                    show: true,
                    color: 'black',
                    position: 'inside',
                    distance: 0,
                    fontSize: 10,
                    rotate: 45,
                },
                // 所有地图的区域颜色
                itemStyle: {
                    areaColor: '#000',
                    borderColor: '#02c0ff',
                },
                emphasis: {
                    itemStyle: {
                        areaColor: '#aaa',
                        shadowColor: 'rgba(0,0,0,0.8)',
                    },
                },
                tooltip: {
                    show: true,
                    formatter: (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: [
                {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: [{ name: '肇庆市', value: [112.48461, 23.05196, 20] },
                    { name: '佛山市', value: [113.130234, 23.018978, 30] },
                    { name: '广州', value: [113.261081, 23.139856, 10] }],
                    symbolSize: function (val: any) {
                        return val[2] / 15;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#9eff9e'
                        }
                    }
                },
                {
                    name: 'Top 5',
                    type: 'effectScatter',
                    colorBy: 'series',
                    effectType: 'ripple',
                    showEffectOn: 'render',
                    rippleEffect: {
                        color: '#9eff9e',
                        number: 4,
                        period: 4,
                        scale: 4.5,
                        brushType: 'fill'
                    },
                    itemStyle: {
                        normal: {
                            color: '#9eff9e'
                        }
                    },
                    coordinateSystem: 'geo',
                    data: [{ name: '肇庆市', value: [112.48461, 23.05196, 20] },
                    { name: '佛山市', value: [113.130234, 23.018978, 30] },
                    { name: '广州', value: [113.261081, 23.139856, 10] }],
                }
            ],
        }
        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(() => {
    initEcharts()
})

</script>

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