引入 import Map from './map.vue'
调用 <Map />
//创建组件

<template>
    <div>
         <div id="chinaMap"  style="height: 530px;"></div>
    </div>
</template>
<script lang="ts">
    import * as echarts from 'echarts'
    import chinaJSON from './china.json'  // 就是地图数据，可以直接在网上直接下载 
    import {defineComponent,onMounted,ref} from 'vue';
    export default defineComponent({
        setup(props,{emit}){
            onMounted(()=>{
                // 当界面挂载出来后就会自动执行
                drawChina();
            })
            let regions:any = []
            let scatter = [
                {name:'上海',value:[121.472644, 31.231706,9],name1:'公司数:',val1:'230',name2:'雇员数',val2:'500',name3:'累计发送',val3:'636'},
                {name:'安徽',value:[117.283042, 31.86119],name1:'公司数:',val1:'320',name2:'雇员数',val2:'530',name3:'累计发送',val3:'636'},
                {name:'澳门',value:[113.54909, 22.198951],name1:'公司数:',val1:'340',name2:'雇员数',val2:'540',name3:'累计发送',val3:'626'},
            ]
            const drawChina = ()=>{
                var myChart = echarts.init(document.getElementById('chinaMap'));
                echarts.registerMap('china', chinaJSON) //注册可用的地图
                document.getElementById("chinaMap").removeAttribute('_echarts_instance_');
                var optionObj = {
                    geo: {
                    map: 'china',
                    roam: true, //是否允许缩放，拖拽
                    zoom: 1.5, //初始化大小
                    //缩放大小限制
                    scaleLimit: {
                        min: 2, //最小
                        max: 2, //最大
                    },
                    //设置中心点
                    center: [103.823557, 36.058039],
                    //省份地图添加背景
                    regions: regions,
                    itemStyle: {
                    areaColor: '#478ec1',
                    color: '#ffffff',
                    borderColor: '#aeafa8',
                    borderWidth: 1,
                    },
                    //高亮状态
                    emphasis: {
                        itemStyle: {
                            areaColor: '#40adff',
                            color: '#ffffff',
                        },
                    },
                    },
                    tooltip:{
                        triggerOn:'click',
                        formatter:'{a}',
                        show:false,
                    },
                    //配置属性
                    series: {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: scatter, 
                        showEffectOn: 'render',
                        rippleEffect: {
                            //涟漪特效相关配置
                            brushType: 'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'
                        },
                    hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果
                    label: {
                    //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true,
                        },
                    },
                    itemStyle: {
                    //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时
                        normal: {
                            color: '#ffffff', //散点的颜色
                            shadowBlur: 5,
                            shadowColor: 10,
                            fontSize: '10px',
                        },
                    },
                        zlevel: 1,
                    },
                }
                setTimeout(()=>{
                    myChart.setOption(optionObj);
                },10)

                myChart.on('click', function (params:any) {
                    doing some thing
                });
            }
            return{
                drawChina,
            }
        }
    })
</script>