可视化大屏编辑器, 开源!

hi, 大家好, 我是徐小夕. 

5年前就开始着手设计和研发可视化大屏编辑器, 当时低代码在国内还没有现在那么火, 有人欢喜有人哀, 那个时候我就比较坚定的认为无码化搭建未来一定是个趋势, 能极大的帮助企业提高研发效率和降低研发成本, 所以 all in 做了2年, 上线了一个相对闭环的MVP可视化大屏搭建平台——V6.Dooring.

通过在技术社区不断的分享可视化搭建的技术实践和设计思路, 也参与了很多线上线下的技术分享, 慢慢市场终于“热了”起来.(机缘巧合)

从V6.Dooring的技术架构的设计, 到团队组建, 再到帮助企业做解决方案, 当时几乎所有的周末都花在这上面了, 想想收获还是挺大的, 接触到了形形色色的企业需求, 也不断完整着可视化大屏编辑器的功能, 最后推出了一个还算通用的解决方案:

当然上面介绍的还都不是这篇文章的重点.

重点是, 时隔4年, 我们打算把通用的可视化大屏解决方案, 开源! 

一方面是供大家学习参考, 更好的解决企业自身的业务需求, 另一方面可以提供一个技术交流的平台, 大家可以对可视化搭建领域的技术实践, 提出自己的想法和观点, 共同打造智能化, 体验更好的搭建产品.

先上github地址: https://github.com/MrXujiang/v6.dooring.public

V6.Dooring开源大屏编辑器演示

其实最近几年我在公众号分享了很多零代码和可视化搭建的技术实现和产品设计:

 这里为了让大家更近一步了解V6-Dooring可视化大屏编辑器, 我还是会从技术设计到产品解决方案设计的角度, 和大家详细分享一下, 让大家在学习我们可视化大屏开源方案的过程中, 对可视化搭建技术产品, 有更深入的理解.

如果大家觉得有帮助, 不要忘记点赞 + 收藏哦, 后面我会持续分享最干的互联网干货.

你将收获

• 可视化大屏产品设计思路

• 主流可视化图表库技术选型

• 大屏编辑器设计思路

• 大屏可视化编辑器Schema设计

• 用户数据自治探索

方案实现

1.可视化大屏产品设计思路

目前很多企业或多或少的面临“信息孤岛”问题，各个系统平台之间的数据无法实现互通共享，难以实现一体化的数据分析和实时呈现。

相比于传统手工定制的图表与数据仪表盘，可视化大屏制作平台的出现，可以打破抵消的定制开发, 数据分散的问题，通过数据采集、清洗、分析到直观实时的数据可视化展现，能够多方位、多角度、全景展现各项指标，实时监控，动态一目了然。

针对以上需求, 我们设计了一套可视化大屏解决方案, 具体包含如下几点:

上图是笔者4个月前设计的基本草图, 后期会持续更新. 通过以上的设计分解, 我们基本可以搭建一个可自己定制的数据大屏.

2.主流可视化图表库技术选型

目前我调研的已知主流可视化库有:

• echart 一个基于 JavaScript 的老牌开源可视化图表库

• D3.js 一个数据驱动的可视化库, 可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作

• antv 包含一套完整的可视化组件体系

• Chart.js 基于 HTML5 的 简单易用的 JavaScript 图表库

• metrics-graphics 建立在D3之上的可视化库, 针对可视化和布置时间序列数据进行了优化

• C3.js 通过包装构造整个图表所需的代码，使生成基于D3的图表变得容易

我们使用以上任何一个库都可以实现我们的可视化大屏搭建的需求, 各位可以根据喜好来选择.

3.大屏编辑器设计思路

在上面的分析中我们知道一个大屏编辑器需要有个编辑器核心, 主要包含以下部分:

• 组件库

• 拖拽(自由拖拽, 参考线, 自动提示)

• 画布渲染器

• 属性编辑器

如下图所示:

组件库我们可以用任何组件封装方式(react/vue等), 这里沿用H5-Dooring的可视化组件设计方式, 对组件模型进行优化和设计.

类似的代码如下:

import { Chart } from '@antv/f2';
import React, { memo, useEffect, useRef } from 'react';

import styles from './index.less';
import { IChartConfig } from './schema';

const XChart = (props:IChartConfig) => {
  const { data, color, size, paddingTop, title } = props;
  const chartRef = useRef(null);
  useEffect(() => {
      const chart = new Chart({
        el: chartRef.current || undefined,
        pixelRatio: window.devicePixelRatio, // 指定分辨率
      });

      // step 2