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

项目地址

系列推荐

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

使用场景

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

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

图形特色

1. 分为虚拟地图和现实地图，表达不一样类型的数据

2. 能够对地图进行拖拽、缩放，实现不一样层级的数据展现、例如国家级别、省份级别、城市级别

3. 须要和地理位置进行关联才能展现相关数据信息

常见属性

1. 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'
       }
   }]
   复制代码

2. series[i]-map（地图系列）
   • geoIndex（geo组件索引）：默认状况下，series-map会生成内部专用的geo组件，可是若是须要需散点图、迁徙图共用一个geo组件，就须要使用geoIndex了

实例分析

1. 省份旅游人数填充地图

模型分析：

维度：地理位置

度量：旅游人数

数据分析：

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

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

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

2. 北上广迁徙地图

模型分析：

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

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

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

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

• 涟漪点

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

• 迁徙线

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

3. 杭州出行热力图

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

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

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

[
    120.14322240845,        
    30.236064370321,
    1
]
复制代码

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

相关思考

1. 如何将迁徙地图的图标进行修改
2. 如何优化热力地图大量数据形成的卡顿现象