BI 数据可视化平台建设（1）—交叉表组件演变实战

作者：vivo 互联网大数据团队 - Zhu Jianchen

本文是vivo互联网大数据团队《BI数据可视化平台建设》系列文章第1篇 - 交叉表组件。

交叉表在数据分析里应用广泛，通过本文，你将了解到：

• 交叉表的基本概念，以及BI可视化平台常见术语。

• 我们的表格类组件的演化过程，以及如何通过技术调研和优化实现大数据量下渲染性能，一步一步从原先的~10s降低到3~4s。

• 交叉表的一些特定场景，提供了一些技术实现简易描述，对这些场景有一些宏观认识。

• Worker，虚拟滚动，微应用等关键技术的实现细节。

一、背景

表格和表单在前端里面是最复杂的两类需求，在BI工具平台上，这2类组件需求更多，并且需要实现一些特有的交互展示。目前在敏捷BI平台上进行报表配置，表格类组件的使用占比达到了1/3，在可视化组件库里使用范围很广。为了满足不同的数据分析场景，表格组件主要分为分组表、交叉表、明细表三种类型，其中又以交叉表功能最为丰富强大。随着敏捷BI的业务的发展，交叉表组件也经历了多次设计改版以支持高性能的数据渲染和个性化的展示配置。本文主要通过交叉表组件的升级实践给大家讲解一下如何设计开发高性能的表格组件。 

术语注解

• 【敏捷BI】

专为 vivo 生态用户量身打造的 自助式 BI 平台，提供从数据接入、数据准备、到数据分析、可视化应用、数据管理的一站式数据解决方案，同Quick BI，FineBI。

• 【图表类型】

图表是数据视觉化表示的特殊方式。表示数据的方法有很多，如使用不同的符号、形状和排列，我们把这些称之为图表的类型。一些图表类型你比较熟悉，如条形图、饼图、折线图，但其他类型你可能就很少见了，如桑基图、树图、等值线图的地图。

• 【交互方式】

交互式可视化允许您修改，操作和探索计算机显示的数据。绝大多数交互式可视化系统在计算机网络上，但越来越多出现在平板电脑和智能手机上。相比之下，静态可视化只显示单一的、非交互数据，它通常是为了打印和在屏幕上显示。

• 【度量值】

表示数值的规模和范围。度量通常以间隔表示(10、20、30等等)，代表度数字的单位，如价格、距离、年，或百分比。

• 【指标】

同度量，表示具体某项值，单个值本身没有任何业务意义，一般需要对应的指标口径解释，才会具有业务价值。

二、交叉表介绍

交叉表（Cross Tabulations）是一种常用的由 行、列、汇总字段 三个元素组成分类汇总表格。利用交叉表查询数据非常直观明了，在进行数据分析中也被广泛应用。这里牵涉到另外一个概念即分组报表，分组报表是所有报表当中最普通，最常见的报表类型，也是所有报表工具都支持的一种报表格式。从一般概念上来讲，分组报表就是只有纵向的分组，传统的分组报表制作方式是把报表划分为条带状，用户根据一个数据绑定向导指定分组，汇总字段，生成标准的分组报表。交叉表有多列查询能力、分类汇总、多角度排序、交互式分析等特性。

三、架构演变历程

为了提高交叉表的数据渲染性能和功能扩展能力，敏捷BI的表格组件经历了三次的设计升级。最开始用的jQuery拼接表格方式实现，随着组件化方案的推行，采用了组件化的方式实现升级，随着业务的发展，用多维度、多指标交叉分析场景越来越多了，尤其是通过交叉表进行分析时，大数据量出现了渲染崩溃等问题，所以我们最后通过微前端方式实现。  下面我们从开发难度，性能，功能扩展性，学习成本等方面的调研来讲解对底层表格的升级实践。

3.1 V1版表格

敏捷BI平台第一版表格，技术栈是基于jQuery+DIV的方式实现的。表格拼接属于jQuery时代的常见开发风格，这种方式，代码可维护性会非常差，很容易会出现标签不匹配的情况，不带缩进，调试起来也比较费劲。这个版本的表格组件支持的业务场景主要是数据的基本展现，无法满足用户对表格的数据分析的需求。

• 架构设计

// 简单的拼接代码demo
function createTable