在地图组件的教程中,我们介绍了地图组件的详细设置,包括地图组件的下钻等,本文主要介绍如何设置地图组件的数据联动。
在使用地图组件的联动功能时,通常是通过点击地图某一个区域,其他组件同步更新显示该区域的数据,效果如下图所示:
在上图中,我们展示了省级区域切换和图片之间的联动,然后下钻到浙江省内,展示了市级区域切换和图片之间的联动,然后下钻到杭州市,展示了县级区域切换和图片之间的联动。
涉及到的四组示例数据如下:
示例数据1:
一级地点 | 二级地点 | 三级地点 | 销售额 |
浙江省 | 杭州市 | 余杭区 | 1 |
浙江省 | 杭州市 | 萧山区 | 2 |
浙江省 | 杭州市 | 西湖区 | 3 |
浙江省 | 温州市 | 永嘉县 | 4 |
浙江省 | 温州市 | 乐清市 | 5 |
浙江省 | 温州市 | 瑞安市 | 6 |
浙江省 | 宁波市 | 北仑区 | 7 |
浙江省 | 宁波市 | 慈溪市 | 8 |
浙江省 | 宁波市 | 鄞州区 | 9 |
安徽省 | 合肥市 | 长丰县 | 10 |
安徽省 | 合肥市 | 肥东县 | 11 |
安徽省 | 合肥市 | 巢湖市 | 12 |
安徽省 | 安庆市 | 潜山县 | 13 |
安徽省 | 安庆市 | 桐城市 | 14 |
安徽省 | 安庆市 | 怀宁县 | 15 |
安徽省 | 六安市 | 霍邱县 | 16 |
安徽省 | 六安市 | 金寨县 | 17 |
安徽省 | 六安市 | 霍山县 | 18 |
示例数据2:
一级地点 | 图片 |
浙江省 | https://bingovue.oss-cn-beijing.aliyuncs.com/assets/image/202002181646/red.png |
安徽省 | https://bingovue.oss-cn-beijing.aliyuncs.com/assets/image/202002181646/green.png |
示例数据3:
示例数据4:
在使用地图组件和其他组件的数据联动功能时,我们需要进行如下设置:
(1)组件的设置中不一定要使用地点字段,但是组件对应的数据源中必须包含地点字段,且字段名称必须是按照区域行政级别(省/直辖市为一级,以此类推)分别为“一级地点”“二级地点”“三级地点”,如果需要使用英文,名称为“position_level_1”“position_level_1”“position_level_1”,因为软件需要基于地点字段进行数据筛选
(2)需要参与联动的组件都必须在设置中开启“联动下钻”功能
(3)在同时使用地图的下钻和联动时,下钻之后的地图也必须设置字段,例如从省级下钻到市级,则需要给市级地图添加字段,否则市级地图无法实现数据联动
【温馨提示】本教程对应的项目文件在此,大家点击下载参考 →_→ 示例教程