网易有数接入了百度的echarts库,可以绘制echarts标记地图,地图背景为百度地图。

首先,在画布上添加一个echarts标记地图控件。

echarts标记地图 - 图1

绘制echarts标记地图时支持两种方式:使用经纬度数据绘制、使用地址数据绘制。

使用经纬度数据绘制时,需要数据里提供了包含经纬度信息的数据字段,我们将经纬度数据拖入对应的配置区,即可在指定位置绘制标记点,如图所示,我们将杭州各小区的经纬度字段拖入图表配置区的“经度”、“纬度”区域,地图上即在对应的位置绘制出小区的标记点。

同时拖入字段可设置对应标记点的标签、颜色、尺寸、提示信息、数据筛选

echarts标记地图 - 图2

使用地址数据绘制时,我们只需要提供地址信息,有数会解析地址后在对应的位置绘制数据点,这里我们展示的是杭州滨江区的部分小区。需要注意的是地址解析比较耗时,因此使用地址方式绘制地图时,建议数据项不宜过多,否则可能需要等待较长时间。

echarts标记地图 - 图3

另外,鼠标移动至地图上的数据点时,会有提示框展示该数据点的一些详细信息,我们可以把需要展示的字段拖至“提示信息”区域。

echarts标记地图 - 图4