新手友好！基于零代码平台浏览器市场与用户画像分析-用户画像数据大屏与大屏交互制作全流程演示 一、实验背景1.1 实验目的本实验依次围绕浏览器用户画像分析大屏开展三项递进式实践首先基于已加工的用户画像统计表user_profile_stats完成大屏静态布局设计接着依托已完成的静态布局使用助睿 Max 蓝图编辑器接入数据表并配置组件数据最后在前序市场分析大屏与用户画像大屏基础上拓展实现多屏切换与地图联动交互。通过本实验学生应掌握根据用户画像分析需求合理设计大屏的信息结构与叙事逻辑理解不同图表类型在用户画像分析中的适用场景与分析价值将数据结果转化为可直观理解、可支撑决策的用户洞察站在 “数据产品” 角度思考大屏如何向不同受众传递价值理解蓝图编辑器的基本概念数据源、触发器、动作、并行数据处理使用并行数据处理节点接收筛选器参数并分发给多个 SQL 请求节点为不同图表组件编写带参数的 SQL 查询语句配置筛选器与图表的联动交互使用图层可见性控制实现大屏内容切换使用按钮组件配置页面跳转或内容显示 / 隐藏使用地图组件的交互事件实现省份下钻联动配置指标卡组件根据地图点击动态更新数据1.2 实验环境零代码在线实验平台数据集成平台可视化工具数据大屏MySQL1.3 实验数据本实验使用上一阶段加工完成的user_profile_stats表该表按浏览器维度统计了用户在各人口属性上的分布包括基本信息性别、年龄、学历、职业、收入地域信息居住地类型城市/城郊/乡村、省份维度按浏览器名称分组支持整体分析与分浏览器对比该表结构如下字段类型说明browser_nameVARCHAR(50)浏览器名称genderVARCHAR(10)性别age_groupVARCHAR(10)年龄段eduVARCHAR(50)学历jobVARCHAR(50)职业incomeVARCHAR(50)收入city_typeVARCHAR(10)居住地类型provinceVARCHAR(50)省份user_countINT用户数二、实验步骤2.1 用户画像数据大屏制作2.1.1 大屏设计方案用户画像大屏的具体方案如下模块子模块指标项组件关联数据表备注数据概览用户概况覆盖用户数指标卡user_profile_stats满足筛选条件的用户总数性别比例指标卡user_profile_stats用户年龄均值本科以上占比指标卡user_profile_stats学历本科及以上的用户比例中高收入占比指标卡user_profile_stats月收入5k的用户比例基本信息性别分布饼图user_profile_stats男/女用户占比年龄分布柱状图user_profile_stats按年龄段统计用户数学历分布条形图user_profile_stats按学历层次统计用户数职业分布柱状图user_profile_stats按职业类别统计用户数收入分布柱状图user_profile_stats按收入段统计用户数地域分布城市 vs 乡镇分布饼图user_profile_stats城市/城郊/乡村用户占比用户省份分布中国地图user_profile_stats展示各省份用户数量分布省份用户数TOP5轮播列表user_profile_stats展示用户数量top5省份筛选器浏览器选择下拉多选-支持选择单个、多个或全部浏览器默认全部参考图2.1.2 用户省份分布市场分析大屏已在上一个实验中完成本次实验只制作用户画像大屏。因此在开始布局前需要先将上一个实验已制作的市场分析图表全部隐藏避免与当前用户画像内容重叠干扰。我们可以将市场分析大屏的组件所在的“市场分析”组整体复制、隐藏复制的组重命名为“用户画像”用户画像大屏的组件正常显示。分析省份分布是为了识别区域市场的“热点”与“空白”哪些省份用户最多这些省份是否连片如沿海高活跃带哪些省份是“灯下黑”这些信息直接指导区域运营资源的投放优先级以及本地化推广的策略选择。同时省份分布也是向投资人展示市场覆盖范围的直观方式。在大屏布局中我们把省份分布地图放在最醒目的主视觉位置用地图组件来展示1根据参考图布局添加“基础平面地图”组件设置好大小、位置后添加“区域热力层”子组件2点击“区域热力层”进入子组件配置页面可根据自身需求配置颜色渐变、边界线宽、高亮样式等属性。助睿Max的地图组件支持自定义地图样式如深色模式、清新模式可匹配大屏整体风格2.1.3 核心指标我们在主视觉区域设计了4个核心指标业务问题对应指标用户规模有多大用户总数用户偏年轻还是成熟平均年龄用户的教育水平如何本科及以上用户占比有没有消费潜力中高收入用户月收入≥5k占比核心指标用指标卡数字翻牌器来呈现1根据参考图添加4个“数字翻牌器”纵向排列设置标题和数值样式2每个“数字翻牌器”的标题使用“单张图片”组件设置背景2.1.4 用户数TOP5省份排行榜排行榜通常用表格或横向条形图来展示。表格的优点是信息密度高、精确适合展示排名、省份名称、用户数三列信息这里我们采用表格形式1根据参考图添加“单张图片”组件作为排行榜区域背景2添加“通用标题”组件调整好样式3添加“轮播列表”组件调整好样式行高、列宽、字体、交替行背景色等2.1.5 性别分布性别分布用饼图来展示1使用“单张图片”组件设置区域背景并设置好标题2添加“基础饼图”组件调整大小和位置2.1.6 年龄段分布年龄分布用柱状图来呈现因为年龄是多个有序区间如18、18-25、26-35、35柱状图能直观展示分布形态1使用“单张图片”组件设置区域背景并设置好标题2助睿Max 支持多种柱状图基础柱图、弧形柱图、水平基础柱图、水平胶囊柱图、垂直胶囊柱图、垂直基本柱图堆叠柱状图这里我们使用基础柱图2.1.7 学历分布学历分布用水平基础柱图来展示1使用“单张图片”组件设置区域背景并设置好标题2这里我们使用助睿Max 的水平基础柱图2.1.8 职业分布职业分布用柱状图来展示1使用“单张图片”组件设置区域背景并设置好标题2这里我们使用助睿Max的基础柱图2.1.9 收入分布收入分布用柱状图来展示1使用“单张图片”组件设置区域背景并设置好标题2这里我们使用助睿Max 的水平基础柱图2.1.10 居住地类型分布居住地类型只有三个类别适合用饼图展示结构占比1使用“单张图片”组件设置区域背景并设置好标题2为了使大屏可视化效果更丰富这里我们使用助睿Max 的轮播饼图2.1.11 筛选器用户画像分析大屏的核心价值之一是支持按不同浏览器进行对比分析。通过筛选器用户可以查看全部浏览器用户的整体画像默认视图了解产品大盘用户特征选择单个浏览器如 Chrome、IE、360 等聚焦该浏览器用户的画像回答“使用 Chrome 的用户与其他用户有什么不同”选择多个浏览器进行对比直观比较不同浏览器用户的年龄、职业、地域等分布差异为产品定位和竞争策略提供数据依据。筛选器应满足多选、可清空、支持全选/默认全选的交互需求同时要贴合大屏整体风格1在大屏顶部右侧合适位置添加“下拉选择”组件位于“交互”组件分类中重命名为“浏览器筛选”调整组件位置和大小2在组件右侧属性面板中调整样式2.2 用户画像数据大屏数据接入2.2.1 蓝图连接思路节点连线说明起点节点终点节点连线含义页面加载页面初始化完成浏览器参数接收输入大屏打开时触发参数初始化浏览器筛选器下拉框内容被选中浏览器参数接收输入用户选择浏览器后触发浏览器参数接收输出维度数据SQL请求执行SQL传递浏览器参数浏览器参数接收输出核心指标SQL请求执行SQL传递浏览器参数维度数据SQL请求执行成功维度数据分发输入将维度数据传给分发节点核心指标SQL请求执行成功核心指标分发输入将核心指标数据传给分发节点维度数据分发分支1-7各维度图表导入数据接口性别、年龄、学历等数据核心指标分发分支1-4四个指标卡导入数据接口总用户数、平均年龄等2.2.2 添加年龄字段并导入组件在用户画像大屏中我们需要展示平均年龄这一核心指标。原有的user_profile_stats表中只有年龄段age_group字段没有精确年龄。如果使用年龄段中值估算平均年龄如 26-35 岁取 30.5 岁会存在一定误差。为了更准确地计算平均年龄我们需要在user_profile_stats表中增加一个age字段。创建转换流拖入“执行一个SQL脚本”组件执行以下SQL修改表结构SQLDROP TABLE IF EXISTS user_profile_stats; CREATE TABLE user_profile_stats ( browser_name VARCHAR(50) NOT NULL COMMENT 浏览器名称, gender VARCHAR(10) COMMENT 性别, age INT NOT NULL COMMENT 年龄, age_group VARCHAR(10) COMMENT 年龄段, edu VARCHAR(50) COMMENT 学历, job VARCHAR(50) COMMENT 职业, income VARCHAR(50) COMMENT 收入, city_type VARCHAR(10) COMMENT 居住地类型, province VARCHAR(50) COMMENT 省份, user_count INT NOT NULL COMMENT 用户数 ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户画像统计表;接下来打开“用户画像表加工”转换流做以下修改1修改排序记录组件增加 age 字段的升序排序2修改分组组件分组字段更加 age3执行转换流将以下组件依次导出到蓝图编辑器浏览器筛选器下拉多选性别分布饼图年龄段分布柱状图学历分布条形图职业分布柱状图收入分布柱状图居住地类型饼图用户省份分布地图省份排行榜轮播列表核心指标卡总用户数、平均年龄、中高收入占比2.2.3 添加浏览器参数接收节点大屏上的浏览器筛选器让用户可以选择某个具体的浏览器。当用户切换选择时地图、饼图、柱状图等所有图表的数据都需要跟着变这个节点就是“浏览器参数接收”它用“并行数据处理”组件来实现双击节点添加两个处理方法设置基础URLconst BASE_URL https://lab.guilian.cn; window.GLOBAL_BASE_URL BASE_URL; return data;接收浏览器参数const SELECTED_BROWSER data.value; window.GLOBAL_SELECTED_BROWSER SELECTED_BROWSER; return { value: SELECTED_BROWSER };我们需要填写6个浏览器的对应内容并刷新数据同时输入框中默认选中设置为“IE浏览器”浏览器的选项我们可以直接使用静态数据title为前端显示内容value为实际查询内容即数据库中存储的对应 browser_name如{ title: IE浏览器, value: IE浏览器 }2.2.4 添加SQL请求节点这个节点负责查询性别、年龄、学历、职业、收入、居住地类型、省份等维度数据使用UNION ALL合并输出格式为(dimension_type, name, value)添加“SQL请求”节点重命名为“维度数据SQL请求”查询SQL如下// 从全局变量获取选中的浏览器值 const selectedBrowser window.GLOBAL_SELECTED_BROWSER; let sql -- 性别分布 select gender as dimension_type, gender as name, sum(user_count) as value from labs.user_profile_stats where browser_name ${selectedBrowser} group by gender union all -- 年龄段分布 select age as dimension_type, age_group as name, sum(user_count) as value from labs.user_profile_stats where browser_name ${selectedBrowser} group by age_group union all -- 学历分布 select edu as dimension_type, edu as name, sum(user_count) as value from labs.user_profile_stats where browser_name ${selectedBrowser} group by edu union all -- 职业分布 select job as dimension_type, job as name, sum(user_count) as value from labs.user_profile_stats where browser_name ${selectedBrowser} group by job union all -- 收入分布 select income as dimension_type, income as name, sum(user_count) as value from labs.user_profile_stats where browser_name ${selectedBrowser} group by income union all -- 居住地类型分布 select city_type as dimension_type, city_type as name, sum(user_count) as value from labs.user_profile_stats where browser_name ${selectedBrowser} group by city_type union all -- 省份分布 select province as dimension_type, province as name, sum(user_count) as value from labs.user_profile_stats where browser_name ${selectedBrowser} group by province ; return sql2.2.5 添加核心指标SQL请求节点添加“SQL请求”节点重命名为“核心指标SQL请求”查询SQL如下// 从全局变量获取选中的浏览器值 const selectedBrowser window.GLOBAL_SELECTED_BROWSER; let sql -- 核心指标总用户数、平均年龄、本科及以上占比、中高收入占比 select total_users as name, sum(user_count) as value from labs.user_profile_stats where browser_name ${selectedBrowser} union all select avg_age as name, round(sum(age * user_count) / sum(user_count), 1) as value from labs.user_profile_stats where browser_name ${selectedBrowser} union all select high_edu_ratio as name, round(sum(case when edu in (本科, 硕士及以上) then user_count else 0 end) * 100.0 / sum(user_count), 1) as value from labs.user_profile_stats where browser_name ${selectedBrowser} union all select high_income_ratio as name, round(sum(case when income in (50018000元, 800112000元,12000元以上) then user_count else 0 end) * 100.0 / sum(user_count), 1) as value from labs.user_profile_stats where browser_name ${selectedBrowser} ; return sql2.2.6 添加维度数据分发节点添加“并行数据处理”节点重命名为“数据分发”。将SQL请求节点的“执行成功”连接到该节点。双击节点为每个图表添加一个处理方法性别分布饼图var filtered data.filter(item item.dimension_type gender); return filtered.map(item ({ name: item.name, value: item.value }));年龄段分布柱状图var filtered data.filter(item item.dimension_type age); var order [18, 18-25, 26-35, 36-45, 45]; filtered.sort((a, b) order.indexOf(a.name) - order.indexOf(b.name)); return filtered.map(item ({ x: item.name, y: item.value, s: 用户数 }));学历分布条形图var filtered data.filter(item item.dimension_type edu); var order [小学及以下, 初中, 高中/中专/技校, 大专, 大学本科, 硕士及以上]; filtered.sort((a, b) order.indexOf(a.name) - order.indexOf(b.name)); return filtered.map(item ({ x: item.name, y: item.value, s: 学历 }));职业分布柱状图var filtered data.filter(item item.dimension_type job); return filtered.map(item ({ x: item.name, y: item.value, s: 职业 }));收入分布柱状图var filtered data.filter(item item.dimension_type income); // 按收入金额升序排序提取数字进行比较 filtered.sort((a, b) { // 提取收入段中的最小金额 var getMinIncome (incomeStr) { // 处理 无收入、500元及以下 等特殊情况 if (incomeStr 无收入) return -1; if (incomeStr 500元及以下) return 0; // 提取数字如 1501~2000元 提取 1501 var match incomeStr.match(/(\d)/); return match ? parseInt(match[1]) : 999999; }; return getMinIncome(a.name) - getMinIncome(b.name); }); return filtered.map(item ({ x: item.name, y: item.value, s: 收入 }));居住地类型分布饼图var filtered data.filter(item item.dimension_type city_type); return filtered.map(item ({ name: item.name unknown ? 未知 : item.name, value: item.value }));省份排行榜TOP5// 过滤出省份数据 var filtered data.filter(item item.dimension_type province); // 按用户数降序排序 filtered.sort((a, b) b.value - a.value); // 取前5条 var top5 filtered.slice(0, 5); // 直接返回组件需要的字段名 return top5.map(item ({ province: item.name, user_count: item.value }));2.2.7 添加核心指标分发节点通过“并行数据处理”节点我们按name字段过滤将每个指标单独输出给对应的指标卡。示例总用户数var item data.find(item item.name total_users); return [{ value: item ? item.value : 0 }];其他分支类似只需修改item.name total_users的条件即可2.2.8 连接节点与测试按照蓝图连接示意图依次连接所有节点页面加载 → 浏览器参数接收输入浏览器筛选器 → 浏览器参数接收输入浏览器筛选器 → 维度数据SQL请求执行SQL浏览器筛选器 → 核心指标SQL请求执行SQL维度数据SQL请求执行成功 → 维度数据分发输入核心指标SQL请求执行成功 → 核心指标分发输入维度数据分发分支1-8 → 各维度图表组件导入数据接口核心指标分发分支1-4 → 四个核心指标卡导入数据接口点击蓝图编辑器右上角的“保存”按钮然后返回大屏点击“预览”进行功能测试大屏打开时默认显示第一个浏览器的用户画像数据如下拉框默认选中的浏览器选择其他浏览器所有图表应刷新为新浏览器的数据观察地图、饼图、柱状图是否都随筛选器变化2.3 2012年浏览器全景分析数据大屏交互设置2.3.1 蓝图连接思路节点职责tab列表组件提供“市场分析”和“用户画像”两个选项捕获用户点击输出对应的ID基础平面地图展示省份分布捕获用户点击的省份区域省份参数接收接收省份名称存储到全局变量省份核心指标查询根据省份和浏览器查询该省份的核心指标省份核心指标分发将查询结果拆分为4个独立数值四个指标卡显示该省份的用户画像数据2.3.2 大屏切换设置使用Tab列表组件实现1添加Tab列表组件调整大小、位置两个导航按钮重合2Tab列表组件的基本设置中设置行数为1列数为2再标签默认配置中将“背景颜色”、“选中背景色”、“悬浮背景色”的透明度设置为0这样就看不见Tab列表组件给用户的感觉就是只有2个按钮3设置Tab列表组件每个选项的id在数据中保留2列数据id分别为1、2content为空设置后记得刷新数据4将“市场分析”组、“用户画像”组、Tab列表组件导出到蓝图编辑器5在蓝图编辑器中将“市场分析”组、“用户画像”组、Tab列表组件添加到蓝图编辑器画布中通过“分支判断”节点来做“当Tab点击时”的id判断6在“分支判断”的 满足 分支上添加两个“设置图层可见性”动作目标图层市场分析组 → 显示目标图层用户画像组 → 隐藏7在“判断选项卡”的 不满足 分支上添加两个“设置图层可见性”动作目标图层市场分析组 → 隐藏目标图层用户画像组 → 显示处理方法return data.id 1;2.3.3 地图省份点击联动配置地图组件的“点击区域时”事件是起点它会输出被点击区域的地理信息如省份名称前提是需要开启组件的交互事件提取地区名称并行数据处理// 省份特殊映射直辖市、自治区、特别行政区 const specialMap { 北京市: 北京, 天津市: 天津, 上海市: 上海, 重庆市: 重庆, 广西壮族自治区: 广西, 内蒙古自治区: 内蒙古, 西藏自治区: 西藏, 宁夏回族自治区: 宁夏, 新疆维吾尔自治区: 新疆, 香港特别行政区: 香港, 澳门特别行政区: 澳门 }; let provinceName data.name; // 优先使用特殊映射 if (specialMap[provinceName]) { provinceName specialMap[provinceName]; } else { // 通用处理去除末尾的“省”、“自治区”、“市” provinceName provinceName.replace(/(省|自治区|市)$/, ); } window.globalProvinceName provinceName; return provinceName;省份核心指标查询SQL请求节点const selectedProvince window.globalProvinceName; console.log(点击的省份名称处理后, selectedProvince); const selectedBrowser window.GLOBAL_SELECTED_BROWSER; const sql select total_users as name, sum(user_count) as value from labs.user_profile_stats where browser_name ${selectedBrowser} and province ${selectedProvince} union all select avg_age as name, round(sum(age * user_count) / sum(user_count), 0) as value from labs.user_profile_stats where browser_name ${selectedBrowser} and province ${selectedProvince} union all select high_edu_ratio as name, round(sum(case when edu in (本科, 硕士及以上) then user_count else 0 end) * 100.0 / sum(user_count), 2) as value from labs.user_profile_stats where browser_name ${selectedBrowser} and province ${selectedProvince} union all select high_income_ratio as name, round(sum(case when income in (50018000元, 800112000元,12000元以上) then user_count else 0 end) * 100.0 / sum(user_count), 2) as value from labs.user_profile_stats where browser_name ${selectedBrowser} and province ${selectedProvince} ; console.log(生成的省份核心指标SQL, sql); return sql;省份核心指标分发并行数据处理同前面的核心指标分发处理方法示例总用户数var item data.find(item item.name total_users); return [{ value: item ? item.value : 0 }];其他分支只需修改item.name total_users的条件即可蓝图连线与数据流区域热力层的“点击区域时”事件 → 连接到 “提取地区名称” 节点。“提取地区名称” 的“执行成功”输出 → 连接到 “省份核心指标查询” 节点的“执行SQL”输入。“省份核心指标查询” 的“执行成功”输出 → 连接到 “省份核心指标分发” 节点的输入。“省份核心指标分发” 的四个输出分支 → 分别连接到四个核心指标卡的“导入数据接口”。2.3.4 地图热力层根据用户数渲染颜色配置提取 adcode 映射表并行数据处理在蓝图中添加“并行数据处理”节点命名为“提取adcode映射表”。将区域热力层的“当数据接口地理边界geojson数据加载完成时”事件连接到该节点确保地图数据加载后执行。提取 adcode 映射表的处理方法中输入以下代码/** * 提取地理数据中的 adcode 和 name建立名称→adcode 映射 * param {Object} data - 地理数据对象包含 features 数组 * returns {Object} 名称到 adcode 的映射表 */ function extractAdcodeAndName(data) { if (!data || !Array.isArray(data.features)) { console.error(无效的地图数据格式); return {}; } const nameToAdcode {}; data.features.forEach(feature { const props feature.properties; if (props props.adcode props.name) { nameToAdcode[props.name] props.adcode; } }); return nameToAdcode; } const mapping extractAdcodeAndName(data); window.globalProvinceAdcode mapping; console.log(省份adcode映射表已加载, Object.keys(mapping).length); return mapping;查询所有省份的用户数SQL请求节点添加“SQL请求”节点命名为“各省份用户数查询”。处理方法中输入以下代码const selectedBrowser window.GLOBAL_SELECTED_BROWSER; // 当前选中的浏览器 const sql SELECT province AS name, SUM(user_count) AS value FROM labs.user_profile_stats WHERE browser_name ${selectedBrowser} AND province IS NOT NULL AND province ! GROUP BY province ORDER BY value DESC ; console.log(生成的所有省份用户数SQL, sql); return sql;地图数据映射并行数据处理节点添加“并行数据处理”节点重命名为“地图数据与用户数映射”。处理方法中输入以下代码function convertToMapData(data) { if (!Array.isArray(data) || data.length 0) { return []; } return data.map(item { const provinceName item.name; // 注意SQL 返回字段名为 name let area_id globalProvinceAdcode[provinceName]; // 如果直接匹配失败尝试简化名称案例中已实现 if (!area_id) { const simplifiedName provinceName.replace(/省|市|自治区|特别行政区|回族|壮族|维吾尔|藏族|苗族/g, ); for (const fullName in globalProvinceAdcode) { if (fullName.includes(simplifiedName)) { area_id globalProvinceAdcode[fullName]; break; } } } if (!area_id) { // console.warn(未找到省份 ${provinceName} 的匹配 adcode); area_id 000000; } return { name: provinceName, value: parseFloat(item.value) || 0, area_id: Number(area_id) }; }); } const result convertToMapData(data); // console.log(最终返回的地图热力数据, result); return result;在地图组件基础平面地图中已经添加了子组件“区域热力层”。我们需要将映射后的数据导入该子组件。将“地图数据与用户数映射”节点的输出端口连接到“区域热力层”的“导入热力值数据接口”完整的蓝图数据流如下热力渲染部分独立于点击联动三、实验结果完成上述所有配置后大屏应具备三个核心交互功能大屏切换点击 tab 列表的“市场分析”/“用户画像”正确显示对应大屏内容。地图热力层地图上各省份颜色深浅反映该省份在当前浏览器下的用户数用户数越多颜色越深。省份点击联动点击地图上的省份右侧四个核心指标卡自动更新为该省份的数据。最后点击“发布”按钮在弹出的发布对话框中打开发布分享开关复制分享链接打开浏览器将复制的链接粘贴到地址栏中即可在线观看四、问题与解决本次实验没有遇到问题五、实验总结本次实验完整完成浏览器用户画像分析大屏的静态布局设计、数据接入与交互配置、多屏联动拓展全链路操作将用户画像分析理论与数据可视化大屏实操深度结合收获颇丰掌握用户画像大屏布局设计方法能够基于用户画像统计表user_profile_stats结合分析需求合理规划大屏的信息结构与叙事逻辑理解不同图表类型在用户画像分析中的适用场景与分析价值学会将数据结果转化为可直观理解、支撑决策的用户洞察并能站在 “数据产品” 角度思考大屏向不同受众传递价值的方式。熟悉助睿 Max 蓝图编辑器的使用理解了蓝图编辑器的基本概念包括数据源、触发器、动作、并行数据处理能够使用并行数据处理节点接收筛选器参数并分发给多个 SQL 请求节点为不同图表组件编写带参数的 SQL 查询语句掌握了筛选器与图表的联动交互配置方法。掌握多场景大屏交互拓展能力能够使用图层可见性控制实现大屏内容切换借助按钮组件配置页面跳转或内容显示 / 隐藏学会利用地图组件的交互事件实现省份下钻联动能够配置指标卡组件根据地图点击动态更新数据完成了市场分析大屏与用户画像大屏之间的联动整合。附录图片链接