使用echart散点图绘制地图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用echart散点图绘制地图相关的知识,希望对你有一定的参考价值。

参考技术A 之前没看过echart的地图,最近有个需求需要绘制到深圳地图,经过几番测试,实现需要的效果,这里写篇博客记录一下,先看效果图:

但如果不是node环境呢,比如本地的一个html文件,第一想到的是ajax,但这是本地模拟一下,使用ajax还是有点麻烦,这里超人鸭用一种不太规范的方法引入,这是json文件原本的样子:

我使用一个变量定义这个对象:

然后在html文件中用script标签引入:

这里已经引入成功了,我们可以打印测试一下:

是没问题的,现在拿到深圳地图的json数据,接下来就是绘制地图了,还是echart那一套:

先看看效果:

接下来就是往上面绘制散点图,既然是往以这个地图作为坐标系,那显示在上面点的位置就要在这个地图上,我们需要先写好每个地点的经纬度:

大家百度一下经纬度查询就能找到,然后是散点图的配置,还有一个处理数据的函数:

上面的处理函数也是从官网改造一点细节复制过来的,处理后的每一项data就是这个样子:

散点图会根据value的前两项去匹配坐标,在地图上显示,后面的数据并无关系。到这里的效果:

看到我使用了回调函数格式化了提示框显示的内容,这个回调函数带了一个params参数,这个对象里面基本什么信息都有,大家不知道的话打印一下什么都明了。
到这里就实现使用echart散点图绘制地图,超人鸭这篇文章所实现的适合那种某个区域的某种东西的分布情况,用处还是挺大的,欢迎大家指教哦。

echarts学习 散点图 地图 雷达图 仪表盘

散点图

散点图是用来判断变量是否有关联,xy轴数据为二维数组
xy轴的type都是value,并且可以避免从0开始,scale
在这里插入图片描述
在这里插入图片描述
避免从0开始
在这里插入图片描述在这里插入图片描述

气泡图

散点大小颜色不一样
在这里插入图片描述
通过arg拿到数值做判断,在这里插入图片描述
就可以设置不同散点的大小
在这里插入图片描述
在这里插入图片描述
通过设置itemStyle的color可以设置,并且其参数跟symbol的参数不太一样。

直角坐标系图表 常用配置

网格grid 坐标轴axis 区域缩放dataZoom

1 网格grid在这里插入图片描述

在这里插入图片描述
可以把grid当作一个画布,可以控制图表的大小啊,位置啊等等。

坐标轴axis

有xy轴,一个grid最多有两个x和y
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

区域缩放在这里插入图片描述在这里插入图片描述

还有滑块的dataZoom
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

一般只有一个x轴,所以设置0就行
在这里插入图片描述

饼图 分析占比情况

数据不是xy轴了,是一个个对象[{name: ‘淘宝’, value: 1199…}]这种

在这里插入图片描述
在这里插入图片描述

常见效果

1 数据显示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
可以加入换行符
在这里插入图片描述

圆环

在这里插入图片描述

在这里插入图片描述

南丁格尔图

在这里插入图片描述

在这里插入图片描述

选中效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

地图

在这里插入图片描述
在这里插入图片描述
这里使用普通ajax在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

通用配置

在这里插入图片描述
在这里插入图片描述

显示某个区域

步骤:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

常见效果

不同地方不同颜色
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

地图与散点图结合

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这样就完成了两种图标的关联。

雷达图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

常用配置

在这里插入图片描述
在这里插入图片描述

仪表盘

用于进度把握以及数据范围的检检测,如图在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

小结:

各个图表的英文单词: bar, line, scatter/effectScatter ,pie ,map, radar, gauge
在这里插入图片描述

使用场景

柱状图: 分类数据,大小值平均值
折线图: 数据变化趋势
散点图: 不同维度数据的相关性,结合地图使用
饼图: 数据占比情况
地图: 地理位置上的差异
雷达图: 多个维度与标准的对比
仪表盘: 数据进度

以上是关于使用echart散点图绘制地图的主要内容,如果未能解决你的问题,请参考以下文章

散点图(用ECharts绘制)

有没有熟悉echarts的大神,echarts绘制地图的时候,怎么让地图中某个固定区域显示特定的颜色?

【ArcGIS JS API + eCharts系列】实现地图上图表的绘制(附源码)

闪亮的地图上的散点图

python 将标记,散点图和热图绘制到Google地图中。

如何将echarts和百度地图结合