echarts地图上设置散点

4,203 阅读2分钟

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

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

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

1、初始化地图

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

816806-8315f08fedcb9d19.png

2、设置散点坐标及数据

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

816806-a1356a9adede0fe2.png

正常情况下,散点坐标和数据也应该是后台返回,案例中的 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 文档。

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