先来要实现的效果图:
下图2是展示气泡类型为pin的效果:
绘制散点图(气泡)是echarts的一种series:
所以要实现在geojson绘制的地图上展示散点图就不能在series里设置geojson的地图在series的type为map里:
如果将注册的地图放在这里啦,那么在series里设置的scatter无法正常的显示,所以要将注册的geojson地图在echarts的geo里配置,series里的scatter设置coordinateSystem: 'geo',才能实现效果。
下面贴出实现的代码:
用到的geojson文件可以在免费下载
上面的方法,当鼠标经过地图时不会触发echarts的提示框组件tooltip,只有经过scatter才会有,如果地图也要触发tooltip组件,那就必须在series里添加一个type为map的serise,type的值为注册的地图比如type='china';
其中的geoIndex很关键,如果不设置为option里的对应的geo,map series 会自己生成内部专用的 geo
组件,但是也可以用这个 geoIndex
指定一个 组件。这样的话,map 和 其他 series(例如散点图)就可以共享一个 组件了。并且, 组件的颜色也可以被这个 map series 控制,从而用 来更改。
修改:实现上面的代码后,发现在scatter上显示label数据时,默认显示的是我们处理后的value里索引为1的经纬度数据,并不是我们要的真实value数据,官网上的很多案例都没有体现该项的配置,
我们需要自己去设置标签内容,使用echarts的formatter:
其中formatter: '{@[2]}'里的@[2]表示获取value里的第三项。具体参数可看上方给的链接
注:这里是使用的geojson文件绘制的地图,可以直接获取到里面的数据,也可以使用echarts给的地图js来绘制地图,但是没办法获取到文件里的数据,也无法在上面展示散点图,可以在3Dmap里使用。
比如中国的地图js可以引入:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。