<template>
    <div ref="chartRef"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import '../../utils/map/world.js'
import '../../utils/map/guangdong.js'
import '../../utils/map/china.js'



//父组件动态绑定数据属性
const props = defineProps({
    mapType: {
        type: String,
        default: 'china'
    },
    coordData: {
        type: Array<any>,
        default: []
    }
})


//动画路径
const planePath = 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705';



/**
 * 起始地坐标 广州
 */
const originaCoord = [113.270793, 23.135308]


//图表容器ref
const chartRef: any = ref(null)
//echart实例 markRaw只读状态
const chart: any = markRaw({ value: null })



watch([() => props.mapType, () => props.coordData], (old1: any, old2: any) => {
    if (chart.value != null) {
        //地图类型
        var animCoord: any = []
        option.geo.map = props.mapType
        let coordArr = props.coordData
        if (coordArr.length == 0) {
            return
        }
        if (props.mapType == 'china') {
            option.geo.center = [105, 36]
        } else {
            option.geo.center = [113.8668, 22.8076]
        }


        coordArr.forEach((res: any) => {
            animCoord.push([{ coord: originaCoord }, { coord: res.value }])
        })
        option.series[0].data = animCoord
        option.series[1].data = animCoord
        option.series[2].data = coordArr
        chart.value.setOption(option)
    }
})





onMounted(async () => {
    chart.value = echarts.init(chartRef.value)
    option.geo.map = props.mapType

    var animCoord: any = []
    props.coordData.forEach((res: any) => {
        animCoord.push([{ coord: originaCoord }, { coord: res.value }])
    })
    option.series[0].data = animCoord
    option.series[1].data = animCoord
    option.series[2].data = props.coordData
    chart.value.setOption(option)
    window.addEventListener('resize', () => {
        chart.value.resize()
    })
})



let option = {
    tooltip: {
        trigger: 'item'
    },
    geo: {
        map: props.mapType,
        zoom: 1.2,
        roam: true,//缩放
        center: [105, 36],
        label: {
            emphasis: {//地图区域悬浮文字高亮颜色
                show: true,
                color: '#ffffff'
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#142957',//各省份区域颜色
                borderColor: '#0692a4'//边框颜色
            },
            emphasis: {//悬浮高亮颜色
                areaColor: '#0b1c2d'
            }
        }
    },
    series: [
        {
            name: '广州',
            type: 'lines',
            zlevel: 1,
            effect: {//发散时 描线的颜色
                show: true,
                period: 6,
                trailLength: 0.7,
                color: '#FD9F52',
                symbolSize: 4
            },
            lineStyle: {
                normal: {//发散前 线的颜色
                    color: '#ffa022',
                    width: 0,
                    curveness: 0.2
                }
            },
            data: [[{ coord: originaCoord }, { coord: [113.631349, 34.753488, 10] }],
            [{ coord: originaCoord }, { coord: [102.839667, 24.885953, 60] }],
            [{ coord: originaCoord }, { coord: [84.89587, 45.585765, 120] }]]
        }, {
            name: '广州',
            type: 'lines',
            zlevel: 2,
            effect: {
                show: true,
                period: 6,
                trailLength: 0,
                symbol: planePath,
                symbolSize: 15
            },
            lineStyle: {
                normal: {//发散前 线的颜色
                    color: '#ffa022',
                    width: 1,
                    opacity: 0.4,
                    curveness: 0.2//线的弯曲度和动画的轨迹度一致
                }
            },
            data: [[{ coord: originaCoord }, { coord: [113.631349, 34.753488, 10] }],
            [{ coord: originaCoord }, { coord: [102.839667, 24.885953, 60] }],
            [{ coord: originaCoord }, { coord: [84.89587, 45.585765, 120] }]]
        }, {
            name: '广州',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
                brushType: 'stroke'
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}',
                    color: '#ffffff'
                }
            },
            symbolSize: (params: any) => {
                //按比例设置点大小
                return params[2] / 8;
            },
            itemStyle: {
                normal: {//点颜色
                    color: '#FD9F52'
                }
            },
            data: [
                { name: '郑州', value: [113.631349, 34.753488, 10] },
                { name: '昆明', value: [102.839667, 24.885953, 60] },
                { name: '克拉玛依', value: [84.89587, 45.585765, 120] }
            ]
        }
    ]
};


</script>

<style lang="less" scoped></style>
