腾讯灯塔DataTalk可视化平台之——组件设计

背景

DataTalk是一款面向不同用户角色的、支持多种数据源、多端、开放式的数据可视化平台。

通过DataTalk创作的页面，都是由大大小小不同的组件构成，所以【组件】是整个平台下非常重要的一个模块。

下面就带大家一起了解一下，DataTalk可视化平台的各种组件设计。

1

组件类别

”

按照大的类别可划分为下面五大类：

01

多媒体组件

如富文本编辑、图片、web嵌入等。

02

图表组件

如折线图、柱状图、表格等各类图表类组件。这里你只需要从左侧拖入到画布中即可，在配置你想要的数据，图形就可以显示在画布当中。

03

功能组件

如容器，占位组件等。配合自由画布和栅格画布两种模式，支持随意布局行列，也支持采用占位组件，以达到理想的效果。

04

交互组件

如下拉框，时间选择器等。

05

开放组件

#1

code组件

用户可以直接在DataTalk平台编写vue组件（支持使用Antd-vue作为基础组件）,如下图，几个组件都是使用代码组件编写完成的。

下图展示的模板，其实就是vue中的<tamplate>。

下图展示的是vue的script代码，我们没有进行任何的封装，和你在本地开发的代码是一致的。

#2

DIY图表组件

下图展示的不仅仅是左侧的几个组件，其实你可以基于此实现任何你想要的echarts图表组件。

下图可以看到实实在在的echarts写法（和你在echarts官网查看demo是一致的），我们可以直接通过拖拽分析，查询出想要的数据，直接应用在DIY图表组件中。

如下图，也是通过DIY图表组件创造出来的。（PS：理论上能限制你的只有创意）

#3

插件式组件

以上组件如果仍然满足不了你的需求，那么我们也抽取了DataTalk组件的开发模板，无需关注过多的内部细节，专注组件本身，定制开发，下图中的这些组件都是以插件形式加入的，后文会详细讲解。

2

组件结构

”

主要以JSON To UI去设计的组件。每一个组件都可以抽象成两部分：展示和编辑。

#1

viewWrapper（组件展示）

在一个仪表盘(dashboard )或者说画布上，所呈现的内容，也是用户最终所看到的内容。

#2

jsonSchema描述

如上面我们看到的柱状图，就是展示部分。

上图的key-value对象结构，就是一份柱状图的描述，主要包括【组件描述】【布局信息】【组件实体】【组件参数】【编辑配置】几个部分。而上面这份信息可以直接序列化成JSON，保存到DB中。而我们的仪表盘(dashboard )就是各个组件的组合。

PS：使用JSON去配置页面的前提是，我们的组件库中存在这个组件，随着我们基础组件的增多，通过不同组件的组合配置生成新的组件也不是难事。

#3

组件逻辑

不同种类的组件是通过vue的动态component组件，配合上面JSON中的【component】字段即可完成渲染，而组件中的内部逻辑只需要在其内部编码即可，对于渲染展示等逻辑只需要通过JSON描述即可。

这里我们可以想一下在Unix操作系统中和IO设备的关系，比如C语言中的STDIN和STDOUT，其实都是和外部无关的，只要实现了open close read write seek等接口，无论是一台打孔机，还是一台磁带机，还是现在的PC，只要遵循接口规范即可。这里我们也在不断梳理不同种类的组件应该具备的接口，接下来，只需要按照它去实现即可。

#4

editorForm（组件编辑配置）

我们为每个组件都提供了丰富的功能，所以也需要有对应的UI配置，比如可视化图表中坐标轴样式，图例显示样式等等。对于这些配置其实完全可以进行一次抽象：

以上这些内容，都可以统一归纳为一个表单，当然这里有的是一个普通的表单，而有的则是一个复杂的分析模型，但最终对于每一个组件来说，都可以归纳为 【表单】，对于表单的内容设置保存后，就等于对这个组件进行了各种属性的配置，最后表单的value会以props的形式注入到组件中。

对于复杂的表单，比如上面最后一张图中（下图左）：

其实这里也是一份JSON配置，而组件就是基于antd的基础组件库而已（上图右）。

所以这里再次强调：配置化生成UI， JSON To UI。

而通过JSON配置去生成UI是第一步，在下一步就是直接拖拽生成，其实也就是现在各类LowCode平台在做的，当然这不光是props的设置，还涉及server请求通信，事件响应等，但整体思路大致如此。

3

组件交互

”

组件和组件之间是如何进行交互的呢？比如我们的一个下拉列表+一个折线图如何进行联动呢？

我们采用：数据驱动UI交互，组件本身是高内聚的，而组件之间是解耦的，采用数据变量去影响组件的变化。

如我们的一个下拉框数据来源：可以是一段SQL，通过SQL查询的数据绑定到option上，也就是SQL变量，也可以是静态的key-value数据。

而下拉框选择后的内容，也就是组件的内部变量，比如下拉框对应的变量为selectValue，那么用户通过选择不同的值，selectValue=北京 selectValue=深圳，这些变量本身存储在store中，而其他的组件可以关联这个selectValue变量，通过watch、监听store的变化等，会自动触发组件内部的render，从而达到通过数据的变化而影响组件的变化。

01

在线编写组件的能力

我们现在虽然提供了不少的组件，但是往往还是无法满足用户的全部需求。

因此为了满足不同用户角色的需求，我们提供了【code组件】，让大家基于我们的平台直接开发出来你想要的组件。

这里我们没有做过多的二次封装，就和大家在vscode中直接写vue一样。

后续规划的组件市场，也将会让你在DataTalk上写的组件能够发布到市场中让更多小伙伴使用。

4

插件式组件

”

上面提到过插件式组件，也讲过每个插件的结构是什么，其核心就是viewWarpper+editorForm这两部分。

☆

插件式组件说明（componentPlugin）

#1

数据类组件(通过拖拽/SQL/API三种模式生成，如折线图，柱状图等)

viewWarpper：组件内容，用于在画布上，仪表盘上的展示

· 若为echarts组件，则是对应的option.js，可以参照bar3D/viewWarpper/index.js

· 若非echarts组件，则是 xx.vue 组件

editorForm：组件配置表单，主要通过各种配置去生成表单，最后以表单的结果内容去设置viewWarpper的形态

· conditionEditror：条件配置，主要用于推送验证

· dataEditor：数据配置，主要针对于数据结果集的处理，如分组，format等

· styleEditor：样式配置，主要针对组件本身的样式，颜色，标题等配置

config.js：主要针对于组件在画布中的各种配置，如icon，名称，初始大小，默认值等

tips.js：用于在画布中对于组件的tips信息的展示，以及指标维度配置条件

#2

普通交互类组件(如交互组件，多媒体组件，功能组件等)

viewWarpper：组件内容，用于在画布上，仪表盘上的展示

· vue组件代码 一般为index.vue

· 主要关注变量的注册和变量的解析使用

editorForm：组件配置表单，主要通过各种配置去生成表单，最后以表单的结果内容去设置viewWarpper的形态

· 配置表单vue组件，一般为index.vue

config.js：主要是针对于组件在画布中的各种配置，如icon，名称，初始大小，默认值等

tips.js：用于在画布中对于组件的tips信息展示，以及指标维度配置条件

以上两种种类都在componentPlugin同一文件夹下，区别主要就是：数据类组件editorForm分成三类。

5

结尾

”

01

DataTalk介绍

灯塔DataTalk——如同乐高，这是一个开放/自由的数据可视化世界

02

效果展示（下表均为虚拟数据，仅供参考）

#1

大屏效果

#2

微博热搜

Datatalk仍在不断迭代，欢迎大家提出宝贵意见，我们一同共建~您可以将您的想法留在评论区，或后台私信「腾讯灯塔」公众号，我们期待您的声音！