写在前面

做为一名在大数据和前端圈混迹多年的攻城狮，最近一年一直在做可视化大屏工具这部分，去年上半年起，开始干可视化大屏工具自研的活，乘着有空，正好把整体的架构设计总结一下。

各家云厂商的可视化大屏产品分析

大屏工具是干啥的，具体主要有哪些功能，我们可以调研分析下各家云厂商的大屏产品，他们之间有没有什么特异点之类的。 目前天翼云、阿里云、腾讯云、华为云都有他们的可视化大屏工具，每家云厂商的侧重点均不相同，比如 阿里、腾讯均搭载轻量BI功能，华为云支持数据源最多，明显看出明显从多年项目孵化，天翼云刚公测，BUG还是比较多的，但是大体上基本功能如下：

1. 数据源、大屏低代码编辑、组件模块，三块功能；
2. 数据源：支持多种数据接入，静态数据、Mysql、CSV为基本面需要接入；
3. 大屏低代码编辑：可低代码编辑一张大屏，配置大屏整体样式、背景图、平铺方式、图层编辑，组件拖拽、组件样式调整和配置、数据源接入和处理，数据过滤器，对数据进行简单的处理；
4. 组件模块：组件并不是和大屏直接打包的，是一种弱耦合关系，在大屏配置和展现中为按需调用；

梳理下大屏基础功能架构：

其实细分下来，功能还是蛮多的，先一步一步拆分设计。

整体的系统架构应该是啥

可视化大屏是整体一种偏前端的产品，后端仅仅做数据、资源存储，那么后端的技术栈选型越简单越好。

产品主要分两个部分。

前端：

编辑面板、展现层、3D引擎、组件渲染、配置解析；

1. 编辑面板，主要用来编辑用的，浅显易懂。
2. 展现层，大屏发布后进行展示用，和编辑面板分开。
3. 3D引擎，3D组件渲染用。
4. 组件渲染，组件的注册、加载，渲染。
5. 配置解析，通过读取大屏配置，生成一整张大屏。

后端：

MVC架构，service主要有：数据接入、管理、静态资源托管和调取、缓存服务；

1. 数据接入服务，即接入外部数据源的模块，可接入不同类型的数据源（Mysql、Rest API），通过定时模块调用；
2. 后端核心服务，包括定时器模块、自定义数据处理模块、权限控制模块、配置处理模块、前端组件调用模块；
3. 静态资源托管，前端组件应该是以静态资源托管在后端服务中的；
4. 缓存服务，大屏资源缓存（组件、配置等）、数据缓存，用户session缓存；

技术栈和数据存储选型

最上面的系统架构图可以看出来，前端选择Vue3（其实其他厂商选React比较多，也有用Angular的，优劣就不说明了，适合自己的才是最好）；后端选择Nodejs环境，使用Nestjs框架，相比于阿里系的eggjs、MidwayJs，个人感觉Nestjs在成熟度和可靠度上更占优势些，后端存储：选择MongoDB、Redis以及对象存储，对象存储用于在公有云平台中进行静态资源托管，MongoDB主要做数据存储，以及在私有云环境中（没有对象存储的情况下）承担静态资源托管，Redis做缓存模块。

产品部署架构

云服务上的公有云产品部署方式和一般的传统部署还是不尽一样的，哪怕大屏产品也是如此；公有云服务分 独占实例、还是共享实例，大屏可视化工具对实例占用要求不高，可设计为用户共享实例，服务内进行权限管控。但是，在公有云服务的同时，也要照顾到私有云场景，目前可视化大屏还是有部分是 线上开发、线下交付的，所以我们要兼容公有云、私有云两类场景。

K8S场景下，所有服务为无状态，支持平滑扩缩容，宿主机场景下，采取Docker部署方式，将实例同时启动在一个容器内，使用pm2进行进程管理。

总结

此文总结了一下对可视化大屏工具产品设计的一些总结实践，后续还会随着我们自己的研发进度，对一些细节技术和方案进行说明。