本文档介绍了 Apache ECharts 中的地理可视化组件,这些组件使开发者能够创建交互式地图和地理数据可视化。地理可视化系统由两个主要组件组成:geo 组件和 map 系列。本页涵盖了这些组件的架构、配置选项和使用模式。
有关折线图和柱状图等基本图表类型的信息,请参阅折线图和柱状图。有关通用数据管理的信息,请参阅数据管理。
ECharts 提供了两种主要的地理可视化方法
来源: test/map.html97-101 test/geoScatter.html273-300 test/mapWorld.html96-100
地理可视化系统由几个相互关联的组件组成,它们协同工作以渲染地图并在其上可视化数据。
来源: src/component/geo/GeoView.ts31-108
GeoView 类是地理可视化的主要视图组件。它使用 MapDraw 来渲染地图并处理与地图区域的交互。 GeoModel 类存储地理组件的配置和状态,而 ExtensionAPI 则提供了与 ECharts 实例交互的方法。
在使用地理可视化之前,您需要向 ECharts 注册地图数据。地图数据可以从 JSON 文件加载,也可以直接在代码中指定。
来源: test/map.html44-46 test/mapWorld.html39-50
组件定义了一个地理坐标系,其他系列(如散点图、线图)可以引用它。它本身不显示数据,但提供地图背景和坐标映射。geo
主要功能
配置示例
来源: test/geoScatter.html273-300
map 系列是一种专门的图表类型,直接在地理区域上可视化数据。它将值赋给地图区域并根据这些值应用视觉编码。
主要功能
visualMap 组件一起使用,进行基于值的着色配置示例
来源: test/map.html96-173 test/mapWorld.html96-288
对于地图系列,数据以包含区域名称和值的对象数组形式提供
| 属性 | 类型 | 描述 |
|---|---|---|
| 名称 | 字符串 | 与地图数据匹配的区域名称 |
| 值 | 数字 | 与区域关联的值 |
| 是否选中 | 布尔值 | 区域是否被选中 |
示例
对于地理坐标系上的散点图和其他基于点的系列,数据以地理坐标形式提供
| 格式 | 描述 |
|---|---|
| [经度, 纬度, 值] | 经度、纬度和值 |
| {name, value: [经度, 纬度, 值]} | 包含名称和坐标+值的对象 |
示例
来源: test/geoScatter.html246-265
视觉编码将数据值转换为颜色、大小和不透明度等视觉属性。visualMap 组件常用于地理可视化中,将数据值映射到视觉元素。
配置示例
来源: test/map.html87-94 test/mapWorld.html87-94
ECharts 中的地理可视化支持丰富的交互功能
漫游:平移和缩放地图
区域选择:选择地图上的区域
提示框:悬停时显示信息
动画:在不同地图视图之间进行动画切换
来源: test/map.html459-470 test/map.html485-487
地理可视化系统通过几个关键类实现
GeoView:地理组件的视图类MapDraw:处理实际地图绘制的辅助类GeoModel:存储地理组件配置的模型类处理区域点击的内部流程是
来源: src/component/geo/GeoView.ts70-84 src/component/geo/GeoView.ts86-96
分级统计图使用颜色变化来表示跨区域的数据值。这通常使用地图系列和 visualMap 组件来实现。
点状地图在特定的地理位置显示标记。这通常使用散点图系列和地理组件来实现。
来源: test/geoScatter.html267-265
可以通过设置特定样式来自定义单个区域
来源: test/geoScatter.html285-298
地理可视化与 ECharts 的其他组件良好集成
这种集成允许创建具有丰富用户交互功能的复杂交互式地理数据可视化。