01#

引言

02#

背景

和大多数业务后台相似，天玑系统有独立的数据报表模块，通过不同维度的数据看板（如种草业务的短视频、账号维度；买量业务的渠道、创意维度等）快速呈现核心指标及相关趋势。天玑数据看板支持多种查询方式，包括数据细化查询，同环比展示，不同时间段的数据指标对比，多样化的数据可视化形式以及数据下钻功能，大幅度提升了业务数据分析的效率。

下图展示了种草业务短视频维度的数据看板，对发布量、点赞量、爆文量等核心指标进行了可视化展现。

然而，随着天玑业务的发展，数据可视化看板的需求也变得愈加定制化和灵活。静态数据看板在快速响应需求变化和支持多维分析上的局限性日益突出。例如，当需要追踪特定推广效果时，必须基于多个查询条件进行统计分析，这超出了单一报表的能力范围。对于不同业务小组甚至不同用户，其关注的数据维度、核心指标和数据范围各不相同。因此，构建一个能满足个性化需求的数据可视化平台，成为当前面临的一大挑战。

03#

个性化数据看板

3.1 技术选型

当前市面上有多个解决方案，例如第三方BI软件（如Tableau、PowerBI）、飞书多维表格以及公司的内部BI系统。在实际使用过程中进行了简单的对比

3.2 整体设计

需求分析后，我们希望数据可视化系统能达到以下标准：

• 易上手可定制化搭建

• 集成业务系统及权限管理

• 提供简单易用的交互能力

为了满足业务需求的通用性和定制化，我们决定采用无代码平台开发模式。

首先，数据看板所用到的可视化组件具有通用性，并且范围相对固定，不需要大量的定制开发。无代码平台能够满足个性化配置需求，同时无需使用者具备编码能力。通过无代码可视化搭建平台，业务人员可以通过简单的拖放操作自定义可视化组件，形成符合需求的个性化数据看板，提高了配置的灵活性和便捷性。

其次，为了更好地集成不同业务场景，整体看板采用组件化的方式进行开发。这种方法不仅使得不同业务平台的快速扩展变得更加容易，也保证了看板的通用性和灵活性。在数据源和权限管理方面，我们采用初始化集成的方式，实现即插即用的能力，不对业务系统的数据源和权限进行干预，保证了系统的一致性和安全性。

整体设计理念是通过抽象和组件化开发，使得系统具备良好的扩展性和定制性，最大化地满足不同业务场景下的数据可视化需求。

可视化组件（物料）

在设计无代码平台时，首先需要明确支持的物料，即元组件。在数据看板业务场景下，这些元组件就是我们所支持的可视化组件。这些物料类似于积木块，通过这些积木块的自由组合和拼装，可以生成不同的个性化数据看板。

我们首先通过对业务整体进行分析，确定了通用数据可视化报表所支持的范围，并考虑未来报表能力的扩展，制定了可视化组件的范围。除了常用的线图、柱状图和饼图外，还支持以下组件：

• 适合展示关键指标的数字卡片组件

• 适合展示排行情况的横向柱状图

• 适合展示转换情况的漏斗图

• 适合展现数据详细信息的表格

下图为目前天玑个性化数据看板支持的通用组件。

为了达到可视化组件灵活性和通用性，根据可视化组件的特点，我们约定了标准的接口协议。对于大部分可视化组件都可以通过维度数据来表示，例如线饼柱漏斗等标准可视化图形，都主要有横纵两个维度，而对于数字卡片这种即只有一个维度。

通过标准的接口规范，使得这些组件在不同的业务场景下可以灵活重用。同时本身的模块化和组件化设计模式，使得这些组件即插即用。

下图是组件架构图，通过组件化设计、插件化机制、属性配置复用以及支持多种图表类型的设计，极大地提升了系统的灵活性和复用性。这不仅增强了系统对多样化业务需求的适应能力，也提升了开发和维护效率。

DSL设计

在明确了元组件的范围后，我们需要设计一套DSL（Domain Specific Language）来描述这些组件。DSL是低代码/无代码平台设计中的重要一环。如何设计出合理，简单，高效的DSL成为接下来的难题。一方面，通过无代码配置出来的组件，需要转换成对应DSL语言，并将DSL保存到服务端。当需要请求对应的数据看板页面的时候，再通过服务端获取到具体DSL，并通过DSL解析引擎，将DSL转换成页面代码在浏览器中渲染出来。整个过程如下图所示。

举个例子，当解读一个折线图时，我们需要知道横轴按照什么进行分组（时间、分类等）；纵轴统计的数据维度是什么。和刚刚定义的接口规范类似，通过维度记录具体要展现的数据。

除了数据方面的信息外，DSL设计中还要考虑样式，交互等配置，主要会考虑以下几个方面：

• 基础信息：包括组件的ID、名称和描述等。

• 数据相关信息：指定数据来源（如内容表、账户表等），定义横轴（dimension）和纵轴（metrics），以及相关的筛选器（filter），通过过滤缩小数据范围；

• 展现相关配置：包括图形类型、图表样式、字体、数字展现及轴线样式等；

上图展现了简化版的DSL数据结构，除了id，name等基础信息外；dataOption描述了图表所展示数据的相关配置，包括了数据来源、维度、筛选条件等；chartOption则包含了所有和图表展现相关的信息，包括图表类型、选用主题、图表样式、数据展现样式等等。position代表了组件在整个看板的具体展现位置。通过这一套标准的DSL数据格式，我们便可以对所有图表组件进行描述。

通过在无代码平台，根据用户对组件的各种配置，如下图是具体的组件搭建配置界面，主要也是包括了数据和样式的配置，和DSL整体的设计相契合。当用户配置完成并保存，会通过配置转换器将相关的配置进行数据转换并以JSON的格式保存成标准的DSL格式存在服务端。

DSL解析引擎

通过无代码平台的配置生成好的组件转换成DSL后，当页面进行渲染的时候，需要将获取到的DSL转换成具体的一个个可视化组件并在页面上进行展现。这个将DSL转化成具体的页面代码的过程便通过DSL解析引擎来实现。

在DSL中主要包含两部分信息，dataOption中记录了数据相关的信息，chartOption主要包含了图表的展现形式及样式等信息。所以解析引擎主要做两件事，首先通过dataOption中的信息解析出具体的API接口调用。在dataOption中包含了对应的数据源，即可以转换为主要的接口API路径；维度信息和过滤器通过转换变成具体的参数，这样便完成了数据获取过程。其次通过chartOption中的配置，决定将数据以哪种图表形式进行展现，并将样式相关信息转换成样式配置代码等，结合数据信息最终转换成Echarts中具体图表的Options，通过组件模板进行页面渲染。具体解析流程如下图

布局

在上述解析过程中，主要体现在具体的数据表格Card的解析，对于整体报表渲染，即多个数据卡片聚合在一起展现的时候，这里就需要提到个性化数据看板的可视化布局方案。

还记得在DSL中每个组件的设置中都会有一个position属性，这里我们展开看看里面的具体配置：

这里x，y定位卡片的左上角起始点位；w和h表示卡片的宽高。那么这里具体的值的含义是什么呢？在看板设计的时候，我们采用栅格化的布局方案，将页面宽度等分24份，同时固定每个栅格的高度，这样这个页面就是有一个个小格子划分开。如下图：

这样x，y代表着横向和纵向从第几个栅格开始，w和y则代表宽高。上面的配置左起点横向从第6个栅格开始，纵向从第2个栅格开始，宽占4个栅格宽度，高占3个栅格高度。体现在页面上即如上图的布局展现。通过栅格化方式也方便的解决了整体布局的自适应问题。

在此基础上，通过H5的dnd相关API实现拖拉拽的交互能力，通过改变后的大小计算新的位置。布局看起来相对简单，但拖拽后的组件大小根据具体的栅格占比大小贴近对齐新的栅格位置的计算逻辑，同时会处理组件间的边界问题，位置调整后其他所有组件布局的重排等还是比较复杂的。核心逻辑这里参考的实现。

这样就完成了通过无代码平台的配置到DSL的转换，再从配置好的DSL渲染出个性化的数据看板展现流程。

3.3 技术架构

技术选型上，整体无代码平台基于Vue3生态开发，组件层面以来Element-plus进行封装，可视化采用Echarts图表渲染库。配置器，负责将接口数据及用户配置转换成对应组件和看板的DSL；解析引擎部分则通过对DSL的解析，最终转换成组件和看板的代码在页面渲染出来。整体技术架构如图：

04#

效果预览

4.1 组件配置

初次搭建看板会在空白的看板画布上，通过组件配置页面，选择想要搭建的组件并逆行组件的配置。具体配置页面如下图。

通过类型与数据tab签简单配置所需的数据，同时支持进一步通过筛选功能缩小可视化要展现的数据范围。操作简单易懂。同时图表的图例，均值，轴线等配置一目了然，右侧的配置在左侧预览界面实时展现，所见即所得。同时支持多维度双纵轴展现设置，可视化数据展现更加便捷，此功能也一度得到业务同学的好评。

在样式上，不仅支持主题选择也可以自定义颜色，对每一条线，柱，扇，点都支持定制颜色，字体，粗细，线条样式等；在可视化效果上，对横纵轴上也支持各种定制化配置；配置上灵活多变，随意搭配，轻松实现定制化的展现形式。

4.2 看板展示

业务同学通过对不同数据的个性化配置，能够轻松搭建出属于自己的定制化看板，同时数据也支持滚动更新，对自己关注的业务核心指标时刻把握。无论是实时业务数据追踪，业务小组核心数据洞察，热剧新剧整体情况实时跟进还是季度，年度整体情况总结，天玑个性化看板都能够满足。

4.3 分享导出

当需要将搭建好的看板同步给更多的业务小伙伴抑或是合作方，个性化看板的分享功能便可以派上用场。对方可以通过分享的链接快速查看到已搭建的看板。当然如果想要对方可以一同编辑你的看板也可以通过权限控制，邀请协作者的方式对看板进行共建。

而对于一些核心数据想要在大屏上进行分享展示，方便大家共同实时关注相关数据变化，个性化大盘同样支持大屏模式，看板还会自动滚动展示。

除了将整个看板通过链接的形式分享给其他人外，个性化看板也支持具体的组件导出，并对接了飞书文档，将组件中的数据通过表格的形式导出，并将图形通过canvas绘制到飞书文档中，如下图：

4.4 权限控制及访问管理

在看板权限方面，我们对接部门内部的权限系统对看板页面级别及数据级别分别进行控制。创建的看板可以给不同的人员设定角色来控制其访问，编辑等权限。同时针对敏感数据进行数据级别的控制，即使拥有看板权限也需要有对应的数据权限才可以查看对应的看板卡片的图表。

另外为了合理适配分享功能，也增加了对分享出去的看板，设置了特定的权限豁免，针对于具体的被分享的人员开放其看板访问查看的权限，提高看板分享的便捷。

同时在通用方面的考虑，整体看板的组件在权限方面也进行了通用化设计，无论是看板层面还是组件层面都支持定制化权限控制。并对于数据接口权限限制的情况进行合理的文案展现。

05#

总结及未来规划

天玑个性化数据大盘通过无代码平台方案解决了业务方对数据看板高度定制化的诉求。通过抽象基本的图表组件，通过配置化方式，快速拼装属于自己的数据可视化看板，满足不同业务场景及统计需求。灵活的配置方式，多样性的数据组件，大大提高了业务的数据分析效率，便于及时调整相关买量及种草策略。目前业务通过天玑个性化大盘累计搭建数据看板300+，累计创建组件6k+。

天玑个性化数据看板是一套通用的可视化前端解决方案，通过一套通用的可视化看板组件，业务可以结合具体的业务场景及数据进行可视化数据展现，集成在业务系统本身，降低业务系统开发定制化数据看板的门槛，个性化数据大盘目前已在大陆用户增长买量和种草业务以及海外用户增长的投放和种草业务落地。后续还将推广到其他部门内业务。其他业务有相关场景，也欢迎讨论对接，或提供相关技术方案。

目前个性化数据大盘还在初级阶段，还有好多方面需要不断扩展迭代，未来会从以下几方面进行规划：

• 组件扩展：不断丰富组件库，包括已经在规划中的仪表盘，词云等数据组件，同时也会增加更灵活的表格类组件进行详细数据展现等，满足更多的业务场景及诉求。

• 通用性：不断提升个性化看板的通用能力，达到不同业务快速对接的能力。

• 智能化：目前的个性化数据看板，由于较高的灵活性使得如果配置较为复杂的数据看板时，在配置阶段会相对有些复杂，需要较高的数据分析经验；因此后续考虑通过引入智能化交互模式达到整体的智能化搭建方式。同时根据智能化分析给出合理的数据展现形式及数据分析结论等。

也许你还想看