echarts地图上设置散点

前段时间，负责的项目上有一个开发 echarts 地图需求，有了之前的经验，配置地图相对来说简单很多。

但是这次要求在地图上铺设散点，这个是之前没有做过的，单独开发地图或者单独开发散点图难度都不是很大，但两种图形结合起来，还需要自定义，这就需要研究一下了。

通过这篇文章你可以学会如何在地图上自定义显示散点。

1、初始化地图

这里地图以广州市地图为例。首先获取广州市地理 json 文件，通过 registerMap 方法初始化地图。正常情况下，地图数据应为请求后台返回的。

地图数据

2、设置散点坐标及数据

散点也是根据坐标来铺设。坐标是必须的，需要显示哪些数据，可以根据不同的业务需求来初始化。

散点数据和坐标

正常情况下，散点坐标和数据也应该是后台返回，案例中的 converData 方法，是将散点 value 和坐标拼接在了一起，方便查看效果而已。

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: '数量',
         type: 'effectScatter',
         coordinateSystem: 'geo',
         data: convertData(sanData),
        symbolSize: function (val) {
            return val[2];
        },
         showEffectOn: 'emphasis',
        rippleEffect: { brushType: 'stroke' },
        hoverAnimation: true,
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            emphasis: { show: true }
        },
        itemStyle: {
            normal: { color: '#ff8003' }
        }
        }, { // 地图配置
            name: '工程数',
            type: 'map',
            mapType: 'guagzhou', // 自定义扩展图表类型
            geoIndex: 0,
             // aspectScale: 0.75, // 长宽比
             itemStyle: {
                normal: {label: {show: true}},
                emphasis: {label: {show: true}}
            },
            data: mapData
        }]
    };

series （系列列表配置）中添加两个图表配置，通过修改 type 值，决定图表类型（散点图和地图），具体细节配置选项请参看官方 echarts 文档。

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

如果觉得有帮助，就分享给你觉得需要的朋友吧！

公众号【前端很忙】

如何自定义地图，可以查看往期文章： echarts搞定各种地图