背景与挑战

从行业来看，未来所有成功的企业都将是数字化转型中表现卓越的组织。在数据展现能力上，持续探索数据可视化理论、丰富数据分析方法和可视化表达，推动数据可视化自动化、场景化、智能化快速落地，助力京东各业务单元敏捷作战，激发个体创造力，不断适应市场和业务需求的变化。

技术先进性

通过持续建设系统能力，赋能看板、报告、大屏、分析、提数等多个业务场景，同时从4大方向纵向拉通系统质量保障建设，提升系统稳定性，最终实现在复杂多变的业务场景下，通过功能插拔、动态配置，构建一站式的解决方案，主要具备以下优势能力：

1.分析可视化组件：引用业界先进的图形语法理论结合SVG、D3等技术沉淀，自研9类可视化分析能力，如杜邦分析、异动分析、交叉分析等。相较于行业方案，更加贴合京东零售业务分析思路。

2.低代码编排：设计并实现了编排技术方案，包括状态管理机制、可视化编排系统、数据集编排系统、代码生成与注入系统，可将万行代码的看板完全配置化实现。

3.PC、移动端双端支持：基于移动端组件库和低代码平台高效支持移动分析诉求，支持多端、多网络、多设备，交互体验媲美原生App。

4.报告、洞察等场景化能力：基于底层通用系统能力和能力基座打造。报告场景下业内首次支持复杂数据PPT报告的自动化输出，大幅提升分析师效率。洞察场景下基于标准化协议实现洞察配置化，并支持快速横向扩展分析能力，高效支持不同业务场景下的问题自动发现与诊断归因。

以上数据可视化技术方案目前在零售内得到充分应用，有效支撑日常迭代和大促期间复杂多变的业务场景，能够实现降低研发成本，提升研发效率，完善用户体验。

整体架构介绍

在数据驱动业务运营的策略下，以高效灵活、场景化、智能化为目标，整合数据资产和工具，以可视化组件和低代码平台为核心，打造黄金眼、商智等标杆的数据应用，实现对不同业务场景的快速赋能。我们通过持续建设系统能力，赋能看板、报告、大屏、分析、提数等多个业务场景，同时从4大方向纵向拉通系统质量保障建设，提升系统稳定性，最终实现在复杂多变的业务场景下，通过功能插拔、动态配置，构建一站式的解决方案。

d867dd9a0bbda35771454e08d13bc566_format,webp.webp

整体来看，数据分析可视化的能力建设，主要可以分为PC端能力建设和移动端能力建设两个方向，接下来将从PC端的分析可视化组件建设、低代码编排、数据推送，以及移动端能力建设和多端一体建设几个方向，详细介绍数据分析可视化的核心技术方案以及在业务中的应用。

详细设计展开

分析可视化组件

f52d7b390630ad6b6980959aef210853_format,webp.webp

图形语法理论

分析可视化组件底层均采用了业界先进的图形语法理论。图形语法是一种将抽象基本元素组合成图表的规则。图形语法深层次地反应出统计图形的层次结构。在图形语法学中，一般统计图表的规格主要包含6个要素：

•DATA：一组从数据集创建变量的数据操作

•TRANS：变量转换（如排序）

•SCALE：度量（如对数）

•COORD：一个坐标系统（如极坐标）

•ELEMENT：图形及其艺术审美属性（如颜色）

•GUIDE：一个或多个辅助物（如轴线、图例）

和传统枚举图表相比，使用图形语法生成每一个图形的过程就是组合不同的基础图形语法。故而它的灵活和强大之处就在于，只需要改动其中某一步骤，就能得到完全不同的、全新的图表。

c6beaafc20201a969eca622b9de382c4_format,webp.webp

基于灵活的图形语法理论基础，沉淀了大量可视化分析能力，接下来将具体介绍几种特色能力。

杜邦分析

杜邦分析法（DuPont Analysis）是一种综合利用多个财务指标比率关系来拆解企业财务状况的分析方法。其基本思想是将企业净资产收益率逐级分解为多项财务比率乘积，这样有助于深入分析、比较企业的经营业绩。由于这种分析方法最早由美国杜邦公司使用，故名杜邦分析法。使用杜邦分析法可以清晰描述指标体系内指标的层次和指标间的关系。如下图所示，杜邦分析法通过树形结构自顶向下的展示了指标间的构成和层级关系，同时通过指标之间的运算符号清晰展现出指标之间的计算关系，例如“净资产收益率=总资产净利率 * 权益乘数”、“总资产净利率=销售净利率 * 总资产周转率”、“销售净利率=净利润 / 销售收入”、“总资产周转率=销售收入 / 资产总额”。采用这一方法，可使财务比率分析的层次更清晰、条理更突出，为报表分析者全面仔细地了解企业的经营和盈利状况提供方便。

79c67362bc14b21872b57f7e5b4b0afe_format,webp.webp

•布局策略：设计12种布局方案，分为两大类：垂直方向（自顶向下、自底向上）、水平方向（自左向右、自右向左），通过d3-hierarchy对层次结构数据进行布局计算，实现node布局。

•节点关系：node节点关系绘制（父子、兄弟）、node节点辅助信息绘制（提示、预警等），实现关系ICON位置计算、辅助信息位置计算。

•交互：设计了收缩展开、缩放能力，支持大数量图表的交互，通过viewBox实现。

•异动分析

在实际的业务场景中，为实现对全链路监测部分的可视化展示，沉淀了可复用的可视化组件：网格指标卡。该组件适用于异常监控分析、全链路转化分析等分析场景，主要包括以下几部分：

•指标卡：集成指标卡全部功能，并通过对异常指标的特殊标识来达到预警能力

•流转线：反映指标间的转化关系

•标题：业务流程的标识

主要的实现流程如下：

7a5d67a54a66d8cb876a24df41bf7580_format,webp.webp

在具体的技术实现上，针对点、线、卡片的位置计算和绘制，采用了类似杜邦分析的技术思路，前端动态计算节点、链接关系位置，并使用svg等前端技术进行渲染。除此之外由于图表结构和逻辑比较复杂，如何设计该图表的配置化方案，成为了另一个技术难点。为此，针对标题部分我们抽离行、列标题组，复用流程标签组件的配置逻辑；针对卡片本身，复用了原先指标卡的配置逻辑；针对指标卡的位置和连接关系，用户能够通过行列坐标的设置和关系绑定来进行细粒度配置，同时为了节省用户的配置成本，组件会在初始化的时候进行默认编排。

最终在商家异常全链路监测需求中使用网格指标卡组件，针对3个环节、7个模块、19类的核心指标与异常类型商家数量，让用户能够从商家经营整体环节通过预警功能进行风险监控和异常定位。

0db40a3f823642784264a8bc42dd5aed_format,webp.webp

交叉分析

为解决复杂的数据分析场景，创建了一种基于React技术自研的交叉分析表格组件，将常见的表格操作与交叉数据分析的思路结合起来：在传统可下钻表格的基础上，创新地抽取分析动作层，能够类比数据分析中的切片、切块和下钻思路，进行数据分析，使用时允许用户在多个合法维度中选择，形成一条自定义下钻路径，成功地实现多种维度下，在表格中进行可下钻的交叉数据分析，满足了多元复杂的数据分析需求。

cb9ed18bc0d97e541ead3f8341a38ccd_format,webp.webp

具体的实现原理是将表格的上卷下钻逻辑与交叉数据分析逻辑结合起来，这里面的重点处理在于对从调用参数中过滤条件、维度字段和指标字段的进行动态处理，从而实现交叉分析的数据获取查询。首先，对维度字段和指标字段分别进行遍历，能够获取到过滤条件、维度字段和指标字段这三种参数，对于同一个表格来说，数据查询的返回字段是一致的，于是在每一次遍历中，都可以在查询字段结果中增加一项，用于构建最终数据查询的结果集；接下来，从第一步触发下钻的的动作中，获取到父层级的维度信息和具体的值，设置为过滤条件，通过这一步，可以查询出当前父级条件下的数据；接下来，同理如果该维度是子级维度，那么就把该维度条作为聚合维度进行操作；最后，将上述封装好的操作条件，传递给后端进行查询，并将获取到的数据，根据父级指标的维度值，拼接到该项的子节点字段中，这样便语义化的可以了“在父级维度某个维值的过滤条件下，按子级维度聚合的”数据，再整体将最新的数据拼接到的表格数据中，至此便实现了交叉数据分析的分析动作。

69fdbcee2cc5f6144f348cfbed1ba63e_format,webp.webp

自动化分析

在沉淀分析可视化组件的同时，也在自动化、智能化的数据分析方面进行探索和建设。其核心思路是，通过贡献度和基尼系数等算法，计算出最需要关注的品牌、品类等，并基于增强分析技术，如洞察文案生成技术和图表标注技术等，自动生成数据报告。

同时，基于自动分析结果，还可以进一步通过多因素分析等可视化分析组件进行更深入的探查。基于表格组件，通过组件联动能力，组合多个表格形成联动下钻分析。

13b50a8a931219b5e24b4b29cb3e6a74_format,webp.webp

低代码编排

数据产品页面具有复杂的业务逻辑。一方面页面布局复杂，一个页面可能包含数十种组件，涵盖布局、筛选、可视化等多种组件；另一方面组件间存在大量联动逻辑，如筛选组件间联动、筛选组件和可视化组件联动、可视化组件间的联动以及和外部系统的联动等；此外，业务场景灵活多变，例如在作战单元模式下，Boss、采、销、控等角色数据分析思路均不一致：这些都对编排能力提出了极大的挑战。为解决这个问题，持续调研学习行业先进的低代码技术理论，同时结合数据产品的特性，设计并实现了一整套编排技术方案。

首先是自研了基于MVC模型的JMT状态管理框架，在redux的基础上，升级了状态的更新和变化响应机制，支持复杂异步状态管理，以一种通用状态模型支撑了数据产品逻辑的配置化。

798326e06c442a90a4b37fa9d6853961_format,webp.webp

其次是基于JMT组件库自研了可视化编排系统，一方面，通过多种灵活的布局组件，支持复杂页面布局的编排。另一方面，提供了灵活的组件配置面板，除常规样式的编排外，还充分发挥底层数据可视化能力，支持如杜邦分析等指标关系的编排。此外，通过对底层React框架的灵活使用，创新组件嵌套机制，支持可视化组件互相嵌入形成联动分析，如在杜邦分析中既展示GMV的拆解，也展示GMV的达成进度等。

9531eb34e5e9a6c81d17d7dd57f96995_format,webp.webp

第三是构建数据产品特有的数据集编排系统，支持对数据资产、EasyData等多种数据源，通过编排维度、指标、过滤构建数据分析模型，并基于图形语法技术将可视化组件和数据服务的olap能力做充分打通，实现数据驱动可视化。

fafe7226981b04b2df6332c38bd789d3_format,webp.webp

第四是自研了一套代码生成和注入系统。可视化编排和逻辑编排使用一套标准Schema进行驱动，在页面发布时，会基于Schema，结合React和JMT状态管理，自动生成代码。此外，对于页面中的尚未被组件功能覆盖的个性化逻辑，可以通过代码注入，配合JMT函数库快速解决。在百亿补贴等紧急需求中，代码注入功能解决了大量个性化逻辑，在时间紧任务重的情况下，保质保量交付需求。

17b4e602d132b8909d6ea8741e0f7a6a_format,webp.webp

数据推送

邮件作为现有工作模式下一种不可或缺的通信方式，在邮件里查看看板数据（定时汇总为小时/日/周/月等不同时间粒度），成为诸多用户的强烈诉求。

各业务服务调用统一的后端服务创建定时推送任务，任务通过前置配置项检查后，被添加到消费队列中依次处理，处理的产物包括图片、Email HTML、附件等，最终按照用户配置的触发方式推送出去。

下图梳理出任务处理的关键流程：素材处理服务（Node）主要承担推送任务消费及提供获取素材的HTTP服务两大功能。在任务消费过程中，素材处理服务会模拟用户权限打开浏览器去做页面Canvas图像转换、看板截图、PDF生成等操作。如果触达方式为邮件，则会将所有素材填充生成为Email Html文本文件，通过回调返回给后端，推送给用户呈现的内容是数据看板。

c5ac364c0fea964a121ecd2f1fcc467b_format,webp.webp

在素材生产过程中，服务通过捕获屏幕快照来实现这一目的。但是某些情况下，比如设备性能较差或者页面进行缩放而Canvas图像尺寸没有随之调整时，快照图片会变得模糊。为了解决这个问题，我们直接获取Canvas对象。通过Chrome DevTools协议，可以将JS代码发送到浏览器并在上下文中执行，执行结果会被序列化为JSON格式返回给Node.js环境，从而达到Node服务与chromium上下文通信的目的。

在处理阶段，由于Canvas对象是Web API的一部分，只能在浏览器环境中使用。而常用的Node下操作Canvas的工具包几乎都依赖底层的图形库，例如Cairo或Skia等。这对于开发环境（MacOS）和部署环境（CentOS）不一致的研发来说，调试难度较大。为了解决这个问题，通过Node.js环境提供的Buffer对象承接Canvas对象的Data URL，配合JPEG图像编解码器处理。这样就无需考虑底层图形库的兼容性和安装问题，实现素材图片的顺利生成。

11560d79b76d4655a96b96771d8886be_format,webp.webp

依托于数据推送和低代码能力组合的建设，在618大促期间，已将其应用到业务小时报、作战单元日报中，快速实现了基于看板的批量报告功能，帮助3C、大商超等数据BP快速实现面向作战单元的日报和小时报推送，为多场景报告做到了很好的支撑。

移动端能力

通过复用PC端的低代码编排能力，利用jmtm基础组件库和jmtm-charts图表库，能够快速搭建起移动端的数智化分析功能。

a811c50decccb0b3e423dd3479b0181e_format,webp.webp

针对移动端看数场景，使用自研的主题配置工具：将组件字号、颜色、圆角、尺寸等样式变量化，从而可以根据具体需求进行灵活配置。其中色板变量的引入保证了组件库的底色充足，而公共变量的使用则提高了配置效率。另外我们还引入组件变量，实现个性化的定制需求。支持在线预览和一键发布等功能：用户可以通过在线预览功能，在配置过程中即时查看效果；一键发布功能则可以快速将配置好的主题应用到移动端低代码平台中。

34028018c7644d4a0d0847dbdfcbadcb_format,webp.webp

针对移动端的性能优化，通过优化动效的执行时机，将动画交互与耗时的DOM渲染分离开来，提高动效的流畅度，减少页面加载时的卡顿感，确保用户能够得到良好的交互体验。

针对移动端多页面交互场景，创造性的采用类似原生多开webview的翻页卡片机制并对多个页面进行缓存处理，使整个应用体验更加接近原生化。基于多人协作及应用的可扩展性考虑，我们借鉴业内成熟的微应用方案，并结合自身需求场景，支持微应用嵌套微应用的方案，为较复杂应用的场景提供了可能。

多端一体建设

为了提高研发效率并满足用户在不同端的看数需求，我们在PC端逻辑编排的基础上引入了hybrid概念，使编排引擎可以发布到移动端的多个产品线。在页面打包及部署过程中，使用webpack插件jmtbuild-hybird-plugin，发布为能适配到多端的js-sdk资源。最后通过前端微服务平台在对应的容器中加载并展示页面。

通过低代码平台生成的标准页面需要在不同的业务端进行展示，在权限方面，针对嵌入到客户端的场景进行了token校验，对于浏览器H5，采用cookie解析的方式进行登录校验和数据安全保护。标准页面默认在公司内网进行访问，使用colorAdapter适配器函数可以使接口一键转化，接入网关。网关统一接入了神盾、反扒、防刷等功能，保障外网访问的数据和网络安全。

业务贡献和价值

在研发提效方面：在大促期间Boss作战单元的模式下，在战报的应用场景上，通过低代码加数据推送能力的快速整合，在两周内，支持多个部门的报告推送，累计推送战报7220封；此外，在百亿补贴重点项目中，面对紧急多变的业务场景，协同业务团队通过低代码线上配置化+二次开发的方式，2周内交付5个看板、2个大屏，80%的需求在24小时内交付。

在创新业务支持方面：业务对体系化看数需求强烈，期望使用移动端查看业绩达成情况。通过移动端低代码能力，仅用1个产品经理、4个数据研发短时间内从0到1打造出一个基于低代码的黄金眼移动端应用，快速解决业务移动端看数的诉求。

此外，随着零售架构扁平调整，Boss单元需要更高效的数字化决策工具，自动化分析能力也得到了充分的应用：基于丰富的可视化组件和低代码编排能力，结合后端的智能化算法，快速打造零售自动化分析看板，应用于每日的经营过程控制中，将诊断提前至每天的工作中，以提高发现问题和解决问题时效。

展望未来，我们会持续打磨现有能力，并不断结合新的业务场景和行业调研，沉淀新的数据可视化分析能力。首先在智能化方向上，会基于图形语法的可视化理论，并整合AI等能力，建设增强分析能力，打造增强图表和自动化报表，实现自动洞察数据关联、异常及趋势等，将数据分析从描述性分析跃升到预测性分析和决策性分析；同时在质量体系建设方面，会从监控预警、代码质量等方向持续建设，在不断提升交付效率的同时持续提升交付质量：最终期望能够通过数据分析技术能力的综合运用，降低研发成本，提升研发效率，完善用户体验，高效推进人人都是分析师的战略落地。

京东零售数据资产能力升级与实践：https://blog.51cto.com/u_15714439/10050196