DataMaleon 组件化开发实践 | StartDT Tech Lab 14

这是奇点云全新技术专栏「StartDT Tech Lab」的第 14 期。

在这里，我们聚焦数据技术，分享方法论与实战。一线的项目经历，丰富的实践经验，真实的总结体会…滑到文末，可以看到我们的往期内容。

本篇由奇点云前端架构师「怒江」带来：

作者：怒江

阅读时间：约 8 分钟

前情提要

什么是 DataMaleon？

DataMaleon 是奇点云的一款图形化、零编码的数据可视化产品，能帮助企业快速搭建专业水准的数据可视化应用，低成本实现数据可视化呈现、实时监控、智慧决策、数据分析等功能。简单高效、炫酷生动，满足多元场景展示需求，用视觉语言展现数据美学。

#DataMaleon 奇点云数据可视化平台 精准专业与简单高效兼得 生动展现数据美学，尽在 DataMaleon

视频号

今天介绍的组件化开发，则是数据可视化产品中不可缺少的重要环节。

什么是组件化？

组件化最早可以追溯到工业革命时期，福特创造了流水线生产方式：福特将汽车分解成零部件，再把零部件模块化组装。这一创举极大地提高了生产效率。

在前端开发领域，随着各种优秀的前端框架的出现和前后端分离的开发模式的成功，前端组件化也逐渐成为一种主流和共识，它不仅提高了前端的开发效率，同时也降低了维护成本。

前端组件化会以嵌套的组件树的形式来组织应用，将页面上各个独立部分，例如：头部、导航、内容区、侧边栏、底部等视为独立组件，每个组件又包含了其他的像导航链接、博文之类的组件，最后根据内容需要展示不同的组件即可组成完整的页面。

Vue 组件的组织形式（图源 Vue.js 官网）

前端组件化开发经过多年的发展，不管是服务端渲染，还是前端 SPA，都有了比较成熟的组件化开发的方案。Ant Design、Element UI、iView 等优秀前端组件库的流行，更是将组件化开发的优势发挥到了极致。

基于前端组件库的开发模式（图源网络）

可视化开发的痛点

数据可视化的核心和基础是可视化组件，包括图表、地图、媒体、文字、素材、交互等多种类型。

在大量的项目实践中，我们发现了可视化开发存在一些痛点，总结如下：

痛点一

开发门槛高

可视化组件具有可视化、图形化、非原子性等特点。当现有组件不能满足需求时，从零开发一个组件要求开发人员具备数据分析、图形学、可视化、设计学等多种专业知识，需要投入大量的精力。开发门槛高、涉及专业广、投入资源大，是数据可视化开发面临的最大痛点之一。

痛点二

视觉效果不统一

数据可视化是数据到视觉元素的映射，可视化组件的图形元素是表现视觉特征的必备元素，通过图形类别、图形大小、颜色、透明度等视觉通道来表现数据属性的定量信息。

在可视化组件的自定义开发过程中，很难从全局、系列等多个层级对数据图形样式进行统一，从而导致整个数据可视化项目的呈现效果差强人意，自定义的可视化组件不可复用等问题。

可视化图形元素

痛点三

标准化开发难

不同于普通的 Web 组件，可视化组件在实际项目中往往需要不同层度的定制开发。由于图表的构成元素较多，包含图例、标注、坐标轴、提示信息等，相同类型的图表使用不同的图表元素和属性配置，便可具有截然不同的表现形式，天然具有多样性。因此，可视化组件很难通过前端组件库的开发模式来进行标准化开发。

DataMaleon 组件化实践

面对复杂的图表、繁琐的配置、炫酷的视觉效果，以及客户多变的需求，如何在保证质量的情况下做到可视化组件的高效开发？

01

建立图表知识库

首先，我们通过建立图表知识库，解决可视化领域中概念、术语不统一问题，降低可视化开发过程中的沟通成本和开发门槛。

图表知识库 - 图形视觉通道映射规则

图表知识库 - 图表颜色映射

图表知识库是一套包含图表构成、图表用法以及图表知识结构的可视化体系。

· 图表构成决定了图表所属的类别、分析目的、形状以及视觉通道，每个图表都是由一系列独立的图形语法元素组合而成。

可视化图表构成

· 图表用法包含了基于经验总结的关于可视化图表的各种基本知识，以及在不同场景下的使用建议，让可视化开发的图表筛选和使用变得非常简单。

折线图用法示例

· 图表知识结构是对图表构成和图表用法的语义化描述，是连接设计、开发与图表组件库的纽带，它的形式基于 JSON。每个图表的知识结构类似这样：

图表知识结构（基础折线图）

02

构建图表组件库

为了降低可视化组件的编码难度，同时满足不同场景的定制开发需求，我们采用分层架构对可视化图表库进行了二次封装，从而支持通过组件的形式组合出无数种图表。

图表组件库分层设计

其中，图表库提供原生的 API 方法供开发者使用，适用于高度定制开发场景。图形元素和图形组件是对 graphic 绘图方法的封装，而基础组件则是以图表构成元素为视角的更高维度的封装。

使用基础组件，开发者可以像搭积木一样快速组合出任意图表组件。以条形图为例：

同时，我们还在基础组件层完成了可视化主题定制，保证了所有自定义组件的样式和视觉效果的统一。

03

探索组件开发模式

最后，我们还需要解决可视化组件的开发模式问题，打通从生产到消费的前端开发链路。在这个过程中，组件化依然是解决关键问题的重要思想。

为了同时满足可视化组件的统一管理和每个组件可独立发布的需求，我们采用单体式仓库（monorepo）管理项目代码，即在一个项目仓库（repo）中管理多个模块或包（package），每个 package 对应一个可视化组件。

仓库管理模式（图源网络）

相比传统的 monolith 和 multirepo 模式，monorepo 模式在组件的统一构建、版本管理等方面更具优势。

随着可视化组件数量的增多，项目的维护成本会越来越高，我们引入 lerna 作为流程管理工具来优化维护 monorepo 项目的工作流，解决多个组件互相依赖，且发布需要手动维护的问题。

至此，通过构建图表知识库、封装图表组件库，以及使用 monorepo + lerna 的组件开发模式，我们解决了可视化开发中遇到的难点和痛点。最后，我们的 DataMaleon 组件化开发架构如图：

DataMaleon 组件化架构

已上线的可视化组件，可以在 DataMaleon 平台通过拖拽、配置的方式快速使用：