Datav：从零开始的数据可视化大屏搭建系统

本文首发于「Shopee技术团队」微信公众号

摘要

随着 Shopee 业务数据的不断扩大，仅通过表格这样的数据分析方式已经无法满足日常的数据分析需求，丰富的图表分析 Dashboard 就显得格外重要。但是，从事前端开发的同学都知道，这种 Dashboard 页面纯手工开发会耗费比较多的人力资源和时间资源，在量比较多的情况下，可能业务需求都没办法及时响应了。

如果能有一个可以自动生成这些 Dashboard 页面的工具平台，那么可以节省大量的人力和时间，效率提升将会非常显著。本文将分享如何从零开始创建一个数据可视化大屏搭建系统。

1. 现状分析

先来看一份数据。我们团队平均每个季度会有 3-4 个 Dashboard 相关需求，平均每个需求的项目周期约 40 天。目前已经累计有 20+ 页面，每个页面的图表组件约 50+，另一个准备重构的平台（Stella） Dashboard 页面 25+，涉及到的图表组件更多，粗略统计 100+。

这些 Dashboard 页面绝大部分页面内容复杂，交互也复杂。按照传统的开发方式，一个页面的上线大约需要 PM、Dev、QA 共 50+ 人/日。

除开人力资源，接下来看看开发一个 Dashboard 的研发流程是怎样的。

这是一个再正常不过的开发流程。在整个流程中，用时最多的就是数据同步、接口数据聚合、页面开发、联调这四大块——大约占了 70% 的时间。如果能有一个平台解决这几个问题，那么这个平台对于解放人力瓶颈、缩短研发流程、提高研发效率就有着非常大的意义。

目前市面上类似的平台非常多，我们也做了很多横向对比。综合来看，考虑到业务场景的贴近程度，以及开发投入和收益，最终我们决定自研平台 “Data Visualization”（下文简称 “Datav”）。

我们希望这个平台能够承担的角色如下：

Datav 平台承载了两个主要目标：

• 缩短项目周期，从 40 天缩短至 20 天；
• 减少人力成本，FE 从 10 人/日减少到 3 人/日，PM 从 15 人/日减少到 5 人/日，不再需要 BE 和 QA 参与。

2. Datav 设计与关键节点实现

为了能够达成以上两个目标，我们将 Datav 要实现的功能抽象成了五个关键点：

• 重塑整个项目流程，提高 PM 和开发之间的协作效率；
• 支持简单的元数据计算以及更加灵活的数据查询；
• 支持页面快速配置；
• 支持页面组件直连数据源；
• 支持组件联动和筛选查询。

2.1 整体架构设计

接下来将一一介绍每个关键点的实现，下图是我们的整体架构设计。

整个 Datav 平台包含五个非常重要的子系统和模块：

• Designer：设计器是 Datav 平台的核心与难点，支持页面布局配置、页面交互配置和组件数据配置等功能，另外还支持代码片段的配置，也可以称得上是一个低代码平台。
• Admin：是 Datav 的运营管理平台，包含了数据计算、作品管理、组件状态管理、页面发布、页面权限等等常规的平台管理功能。
• UI Components：是整个平台最基础的模块，我们在开源的图表库上面定义了一层标准的 DSL 协议，这个协议和接入 Designer 的协议是对应的，目前已经有 50+ 相关组件，组件数量还在不断增长。
• Datav Server：是一个 node 服务，主要提供一些权限校验、数据聚合、动态 SQL 的生成等功能。
• Datasource Access Server：专门用于连接不同数据源的服务，例如直连 MySQL、ClickHouse、Elasticsearch、Presto 等等，提供了不同的连接 client。

从架构图可以看出，Datav 平台支持直连各种数据源，最终会产出一个 URL，可以方便地集成到任何平台上。下一步计划是支持生成源代码，可供使用方进行二次编辑。

2.2 如何提高各个角色之间的协作效率

在解决这个问题之前，我们和各个角色之间进行了多次沟通，分析了各个角色在项目中的