前段時間酸纲，負(fù)責(zé)的項目上有一個開發(fā) echarts 地圖需求璧榄，有了之前的經(jīng)驗供嚎，配置地圖相對來說簡單很多。

但是這次要求在地圖上鋪設(shè)散點糯而，這個是之前沒有做過的天通，單獨開發(fā)地圖或者單獨開發(fā)散點圖難度都不是很大，但兩種圖形結(jié)合起來熄驼，還需要自定義土砂，這就需要研究一下了。

通過這篇文章你可以學(xué)會如何在地圖上自定義顯示散點谜洽。

1萝映、初始化地圖

這里地圖以廣州市地圖為例。首先獲取廣州市地理 json 文件阐虚，通過 registerMap 方法初始化地圖序臂。正常情況下，地圖數(shù)據(jù)應(yīng)為請求后臺返回的实束。

地圖數(shù)據(jù)

2奥秆、設(shè)置散點坐標(biāo)及數(shù)據(jù)

散點也是根據(jù)坐標(biāo)來鋪設(shè)。坐標(biāo)是必須的咸灿，需要顯示哪些數(shù)據(jù)构订，可以根據(jù)不同的業(yè)務(wù)需求來初始化。

散點數(shù)據(jù)和坐標(biāo)

正常情況下避矢，散點坐標(biāo)和數(shù)據(jù)也應(yīng)該是后臺返回悼瘾，案例中的 converData 方法，是將散點 value 和坐標(biāo)拼接在了一起审胸，方便查看效果而已亥宿。

3、添加散點圖配置和地圖配置

    let option = { // echarts 配置
    tooltip: {  trigger: 'item' },
    geo: { // 地圖配置
        show: true,
        map: 'guangzhou',
        label: {
            normal: { show: false },
            emphasis: { show: false }
        },
        roam: false,
        itemStyle: {
            normal: {
                areaColor: '#47D1FF',
                borderColor: '#3B5077'
            },
            emphasis: { areaColor: '#2B91B7' }
        },
        zoom: 1.2
    },
    series: [{ // 散點配置
         name: '數(shù)量',
         type: 'effectScatter',
         coordinateSystem: 'geo',
         data: convertData(sanData),
        symbolSize: function (val) {
            return val[2];
        },
         showEffectOn: 'emphasis',
        rippleEffect: { brushType: 'stroke' },
        hoverAnimation: true,
        label: {
            normal: {
                formatter: '砂沛',
                position: 'right',
                show: false
            },
            emphasis: { show: true }
        },
        itemStyle: {
            normal: { color: '#ff8003' }
        }
        }, { // 地圖配置
            name: '工程數(shù)',
            type: 'map',
            mapType: 'guagzhou', // 自定義擴(kuò)展圖表類型
            geoIndex: 0,
             // aspectScale: 0.75, // 長寬比
             itemStyle: {
                normal: {label: {show: true}},
                emphasis: {label: {show: true}}
            },
            data: mapData
        }]
    };

series （系列列表配置）中添加兩個圖表配置烫扼，通過修改 type 值，決定圖表類型（散點圖和地圖）碍庵，具體細(xì)節(jié)配置選項請參看官方 echarts 文檔映企。

案例源碼已上傳 https://github.com/zhangqian00/echarts-map-scatter

如果覺得有幫助悟狱，就分享給你覺得需要的朋友吧！

公眾號【前端很忙】

如何自定義地圖堰氓，可以查看往期文章： echarts搞定各種地圖