中国地图基本配置

<script setup>
import { effect, onMounted, ref } from "vue";
import * as echarts from 'echarts'
import chinaMapData from '@/store/china.json'
const chinaRef = ref()
const data = []
const lineData = []
function drawMap() {
    const myChart = echarts.init(chinaRef.value)
    echarts.registerMap('china', chinaMapData)
    const option = {
        backgroundColor: 'pink',
        geo: {
            type: 'map',
            map: 'china',
            roam:true,
            center: [100.97, 29.71],
            label: {
                normal: {
                    textStyle: {
                        color: 'blue'
                    }
                },
                emphasis: {
                    textStyle: {
                        color: 'blue'
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: '#5089EC',
                    borderWidth: 2,
                    areaColor: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(0,102,154,0)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(0,102,154,.4)'
                            }
                        ]
                    }
                },
                emphasis: {
                    areaColor: '#2386AD',
                    borderWidth: 0
                }
            }
        },
        series: [
            //散点图相关配置
            {
                type: 'effectScatter', 
                coordinateSystem: 'geo',
                effectType: 'ripple',
                showEffectOn: 'render',
                rippleEffect: {
                    proiod: 1,
                    scale: 1,
                    brushType: 'fill',

                },
                zlevel: 1,
                data: [{
                    value: [80, 30], itemStyle: { color: '#00eeff' }
                }]
            },
            //线条系列效果
            {
                type:'lines',//线条类型
                zlevel:2,//层级
                symbol:['none','arrow'],
                symbolSize:10,//标记大小
                //轨迹特效
                effect:{
                    show:true,//是否显示
                    period:6,//特效周期
                    trailLength:0,//尾迹长度
                    symbol:'circle',//特效样式
                    symbolSize:15//特效标记大小
                },
                // 线条样式
                lineStyle:{
                    normal:{
                        color:'#93EBF8',//颜色
                        width:2.5,//宽度
                        opacity:0.6,//透明度
                        curveness:0.2//尾迹线条曲直度
                    }
                }

            }

        ]

    }
    myChart.setOption(option)
}
onMounted(() => {
    drawMap()
})

</script>
<template>
    <div ref="chinaRef" class="china">

    </div>
</template>
<style scoped>
.china {
    width: 800px;
    height: 600px;
    margin: 20px;
    border: 2px solid blue;
}
</style>