Echarts数据可视化：图表篇（5）—— 填充地图、迁徙地图、热力地图

项目地址

系列推荐

《JavaScript设计模式与开发实践》最全知识点汇总大全

使用场景

在数据可视化中，地图可视化是不可缺少的重要一环，种类也比较多。例如：填充地图、迁徙地图、热力地图

主要展示地理信息与数据的关联关系

图形特点

分为虚拟地图和现实地图，表达不同类型的数据
可以对地图进行拖拽、缩放，实现不同层级的数据展示、例如国家级别、省份级别、城市级别
需要和地理位置进行关联才能展示相关数据信息

常见属性

geo（地理坐标系组件）：主要用于虚拟地图的绘制
- map（地图类型）：地图数据来源，例如china表示全国各省份数据、hubei表示湖北省各城市的数据，这些数据都需要提前导入
- roam（是否开启鼠标缩放和平移漫游）：开启后，地图就变成可交互型图表了
- center（当前视角的中心点）：用经纬度表示，例如center: [115.97, 29.71]
- boundingCoords（地图范围）：定义地图左上角和右下角的经纬度，用二维数组表示，例如
```
boundingCoords: [
     // 定位左上角经纬度
     [-180, 90],
     // 定位右下角经纬度
     [180, -90]
 ]
```
- zoom（缩放比例）：可以修改地图展示的层级，zoom越大，地图越精细
- itemStyle（地图区域的多边形）：每一块地图区域的样式
- regions[i]（指定区域的样式）：可以配置指定地区的多边形样式，例如
```
regions: [{
    name: '广东',
    itemStyle: {
        areaColor: 'red',
        color: 'red'
    }
}]
```
series[i]-map（地图系列）
- geoIndex（geo组件索引）：默认情况下，series-map会生成内部专用的geo组件，但是如果需要需散点图、迁徙图共用一个geo组件，就需要使用geoIndex了

实例分析

省份旅游人数填充地图

模型分析：

维度：地理位置

度量：旅游人数

数据分析：

假设我们拥有各省份对应的旅游人数，需要将其转换为省份旅游人数填充地图，如何实现？

填充地图最小单位数据格式：

{   
    name: '湖北',   // 地理信息
    value: 1234     // 数值大小
}

北上广迁徙地图

模型分析：

维度：地理位置度量：迁移人数

数据分析：假设我们拥有北京、上海、广州前往其他各省份的迁徙人数，需要绘制这三个省份的迁徙地图，如何绘制？

迁徙地图最小单位数据格式：

迁徙地图构成元素分别为“涟漪点”、“迁徙线”，所以对应的数据格式分别有两种

涟漪点

{
    name: '上海'        // 地理信息
    value: [121.4648, 31.2891, 95]      // 经纬度、数值大小
}

迁徙线

{
    fromName: '北京'        // 出发点
    toName: '上海'          // 到达点
    coords: [
        [116.4551, 40.2539],        // 出发点经纬度
        [121.4648, 31.2891]         // 到达点经纬度
    ]   
}

杭州出行热力图

模型分析：维度：经纬度信息度量：出行人数

数据分析：假设我们拥有杭州某区域的经纬度出行人数合集，如何进行出行热力图的绘制

热力地图最小单位数据格式

[
    120.14322240845,        
    30.236064370321,
    1
]

其中，每一个小点都是由此类型数组组成，分别代表经纬度、人数信息，迁徙图的构成则是由几千甚至上万的小点汇聚而成，通过visualMap视觉通道形成热力地图