引入 import Map from './map.vue'
調(diào)用 <Map />
//創(chuàng)建組件

<template>
    <div>
         <div id="chinaMap"  style="height: 530px;"></div>
    </div>
</template>
<script lang="ts">
    import * as echarts from 'echarts'
    import chinaJSON from './china.json'  // 就是地圖數(shù)據(jù)，可以直接在網(wǎng)上直接下載 
    import {defineComponent,onMounted,ref} from 'vue';
    export default defineComponent({
        setup(props,{emit}){
            onMounted(()=>{
                // 當(dāng)界面掛載出來后就會(huì)自動(dòng)執(zhí)行
                drawChina();
            })
            let regions:any = []
            let scatter = [
                {name:'上海',value:[121.472644, 31.231706,9],name1:'公司數(shù):',val1:'230',name2:'雇員數(shù)',val2:'500',name3:'累計(jì)發(fā)送',val3:'636'},
                {name:'安徽',value:[117.283042, 31.86119],name1:'公司數(shù):',val1:'320',name2:'雇員數(shù)',val2:'530',name3:'累計(jì)發(fā)送',val3:'636'},
                {name:'澳門',value:[113.54909, 22.198951],name1:'公司數(shù):',val1:'340',name2:'雇員數(shù)',val2:'540',name3:'累計(jì)發(fā)送',val3:'626'},
            ]
            const drawChina = ()=>{
                var myChart = echarts.init(document.getElementById('chinaMap'));
                echarts.registerMap('china', chinaJSON) //注冊(cè)可用的地圖
                document.getElementById("chinaMap").removeAttribute('_echarts_instance_');
                var optionObj = {
                    geo: {
                    map: 'china',
                    roam: true, //是否允許縮放，拖拽
                    zoom: 1.5, //初始化大小
                    //縮放大小限制
                    scaleLimit: {
                        min: 2, //最小
                        max: 2, //最大
                    },
                    //設(shè)置中心點(diǎn)
                    center: [103.823557, 36.058039],
                    //省份地圖添加背景
                    regions: regions,
                    itemStyle: {
                    areaColor: '#478ec1',
                    color: '#ffffff',
                    borderColor: '#aeafa8',
                    borderWidth: 1,
                    },
                    //高亮狀態(tài)
                    emphasis: {
                        itemStyle: {
                            areaColor: '#40adff',
                            color: '#ffffff',
                        },
                    },
                    },
                    tooltip:{
                        triggerOn:'click',
                        formatter:'{a}',
                        show:false,
                    },
                    //配置屬性
                    series: {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: scatter, 
                        showEffectOn: 'render',
                        rippleEffect: {
                            //漣漪特效相關(guān)配置
                            brushType: 'stroke', //波紋的繪制方式涉馁，可選 'stroke' 和 'fill'
                        },
                    hoverAnimation: true, //是否開啟鼠標(biāo) hover 的提示動(dòng)畫效果
                    label: {
                    //圖形上的文本標(biāo)簽完丽，可用于說明圖形的一些數(shù)據(jù)信息糯耍，比如值砰诵，名稱等掂器，
                        normal: {
                            formatter: '摊欠',
                            position: 'right',
                            show: true,
                        },
                    },
                    itemStyle: {
                    //圖形樣式丢烘，normal 是圖形在默認(rèn)狀態(tài)下的樣式；emphasis 是圖形在高亮狀態(tài)下的樣式些椒，比如在鼠標(biāo)懸浮或者圖例聯(lián)動(dòng)高亮?xí)r
                        normal: {
                            color: '#ffffff', //散點(diǎn)的顏色
                            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>