在echarts里在geojson绘制的地图上展示散点图气泡、线集

先来要实现的效果图:

下方图1是官网的案例:

下图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';

'地区测试数据''map''china', geoIndex: 0

其中的geoIndex很关键,如果不设置为option里的对应的geo,map series 会自己生成内部专用的 geo 组件,但是也可以用这个 geoIndex 指定一个  组件。这样的话,map 和 其他 series(例如散点图)就可以共享一个  组件了。并且, 组件的颜色也可以被这个 map series 控制,从而用  来更改。

具体可以看api:

修改:实现上面的代码后,发现在scatter上显示label数据时,默认显示的是我们处理后的value里索引为1的经纬度数据,并不是我们要的真实value数据,官网上的很多案例都没有体现该项的配置,

我们需要自己去设置标签内容,使用echarts的formatter:

'点' formatter: '{@[2]}'

其中formatter: '{@[2]}'里的@[2]表示获取value里的第三项。具体参数可看上方给的链接

注:这里是使用的geojson文件绘制的地图,可以直接获取到里面的数据,也可以使用echarts给的地图js来绘制地图,但是没办法获取到文件里的数据,也无法在上面展示散点图,可以在3Dmap里使用。

比如中国的地图js可以引入:

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)