从零开发一款可视化大屏制作平台

徐小夕 等级 926 0 0

几个月前开源的H5页面制作平台H5-Dooring 收到了很多热心的反馈和交流, 顺着笔者之前的规划, 我们又做了一款可视化大屏编辑器V6.Dooring. 接下来笔者就来带大家一起看看我们的方案设计和技术实现.

你将收获

  • 可视化大屏产品设计思路
  • 主流可视化图表库技术选型
  • 大屏编辑器设计思路
  • 大屏可视化编辑器Schema设计
  • 用户数据自治探索

在介绍之前, 我们先看看实现的效果展示.

效果预览

从零开发一款可视化大屏制作平台

方案实现

可视化大屏产品设计思路

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

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

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

从零开发一款可视化大屏制作平台

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

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

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

  • echart 一个基于 JavaScript 的老牌开源可视化图表库
  • D3.js 一个数据驱动的可视化库, 可以不需要其他任何框架独立运行在现代浏览器中,它结合强大的可视化组件来驱动 DOM 操作
  • antv 包含一套完整的可视化组件体系
  • Chart.js 基于 HTML5 的 简单易用的 JavaScript 图表库
  • metrics-graphics 建立在D3之上的可视化库, 针对可视化和布置时间序列数据进行了优化
  • C3.js 通过包装构造整个图表所需的代码,使生成基于D3的图表变得容易

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

大屏编辑器设计思路

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

  • 组件库
  • 拖拽(自由拖拽, 参考线, 自动提示)
  • 画布渲染器
  • 属性编辑器

如下图所示: 从零开发一款可视化大屏制作平台

组件库我们可以用任何组件封装方式(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: 处理数据
      const dataX = data.map(item => ({ ...item, value: Number(item.value) }));

      // Step 2: 载入数据源
      chart.source(dataX);

      // Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
      chart
        .interval()
        .position('name*value')
        .color('name');

      // Step 4: 渲染图表
      chart.render();
  }, [data]);
  return (
    <div className={styles.chartWrap}>
      <div className={styles.chartTitle} style={{ color, fontSize: size, paddingTop }}>
        {title}
      </div>
      <canvas ref={chartRef}></canvas>
    </div>
  );
};

export default memo(XChart);

以上只是一个简单的例子, 更具业务需求的复杂度我们往往会做更多的控制, 比如动画(animation), 事件(event), 数据获取(data inject)等.

组件拖拽可以采用市面已有的Dragable等插件, 也可以采用H5-Dooring的智能网格拖拽. 这里笔者选择自由拖拽来实现. 已有的有:

  • rc-drag
  • sortablejs
  • react-dnd
  • react-dragable
  • vue-dragable

等等. 具体拖拽呈现流程如下:

从零开发一款可视化大屏制作平台

具体拖拽流程就是:

  1. 使用H5 dragable API拖拽左侧组件(component data)进入目标容器(targetBox)
  2. 监听拖拽结束事件拿到拖拽事件传递的data来渲染真实的可视化组件
  3. 可视化组件挂载, schema注入编辑面板, 编辑面板渲染组件属性编辑器
  4. 拖拽, 属性修改, 更新
  5. 预览, 发布

组件的schema参考Dooring DSL设计

可视化大屏数据自治探索

目前我们实现的搭建平台可以静态的设计数据源, 也可以注入第三方接口, 如下:

从零开发一款可视化大屏制作平台

我们可以调用内部接口来实时获取数据, 这块在可视化监控平台用的场景比较多, 方式如下:

从零开发一款可视化大屏制作平台

参数(params)编辑区可以自定义接口参数. 代码编辑器笔者这里推荐两款, 大家可以选用:

  • react-monaco-editor
  • react-codemirror2

使用以上之一可以实现minivscode, 大家也可以尝试一下.

辅助功能

可视化大屏一键截图 一键截图功能还是沿用H5-Dooring 的快捷截图方案, 主要用于对大屏的分享, 海报制作等需求, 我们可以使用以下任何一个组件实现:

  • dom-to-image
  • html2canvas

撤销重做

撤销重做功能我们可以使用已有的库比如react-undo, 也可以自己实现, 实现原理:

从零开发一款可视化大屏制作平台

有点链表的意思, 我们将每一个状态存储到数组中, 通过指针来实现撤销重做的功能, 如果要想更健壮一点, 我们可以设计一套“状态淘汰机制”, 设置可保留的最大状态数, 之前的自动淘汰(删除, 更高大上一点的叫出栈). 这样可以避免复杂操作中的大量状态存储, 节约浏览器内存.

标尺参考线 标尺和参考线这里我们自己实现, 通过动态dom渲染来实现参考线在缩放后的动态收缩, 实现方案核心如下:

arr.forEach(el => {
  let dom = [...Array.from(el.querySelectorAll('.calibrationNumber'))][0] as HTMLElement;
  if (dom) {
    dom.style.transform = `translate3d(-4px, -8px, 0px) scale(${(multiple + 0.1).toFixed(
      1,
    )})`;
  }
});

详细源码可参考: H5-Dooring | 参考线设计源码

后期规划

最近我们的主要方向是H5-Dooring编辑器2.0的开发和可视化大屏搭建平台的升级和优化, 后面会出线上版demo, 欢迎大家把玩.

下期精彩

  • 3D可视化组件设计方案
  • 数据可视化监控平台设计
  • 可视化大屏的数据治理和实时数据呈现
  • H5-Dooring 2.0版本技术分享
收藏
评论区

相关推荐

基于React+Koa实现一个h5页面可视化编辑器
前言 前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价值。 本篇文章并非和数据可视化相关,而是通过抽象技术底层,将其应用于H5页面可视化搭建上,通过技术的手段实现拖拽式生成H5页面。这块也有非常多的应用场景,比如我们需要开发一个移动端网站,一
从零开始刷力扣(一)——485:最大连续1的个数
分类:数组的遍历 题目描述: 给定一个二进制数组, 计算其中最大连续1的个数。 示例1: 输入: 1,1,0,1,1,1 输出: 3 解释: 开头的两位和最后的三位都是连续1,所以最大连续1的个数是 3. 思路 初始化count和maxCount,然后遍历数组,遇见1则count,并且更新与maxCount比较,若比maxCount更大,则更新m
从零开发一款可视化大屏制作平台
几个月前开源的H5页面制作平台H5Dooring(http://h5.dooring.cn/) 收到了很多热心的反馈和交流, 顺着笔者之前的规划, 我们又做了一款可视化大屏编辑器V6.Dooring(https://github.com/MrXujiang/v6.dooring.public). 接下来笔者就来带大家一起看看我们的方案设计和技术实现
Flutter 移动应用开发指南
Flutter 移动应用开发指南 Flutter 作为新一代的跨平台 UI 框架,已经在 Android 和 iOS 移动平台被广泛使用,未来还会进一步扩展到 Web、桌面和嵌入式等平台。只要编写一次代码,就可处处运行,真正做到了全屏制霸。本文将通过从零开发一个类似抖音的短视频应用来展示 Flutter 应用的完整开发过程,以及它的强大性和易用性。
H5性能优化方面的探索
H5性能优化方面的探索 =========== > H5很重要,很重要,很重要,重要的事情必须重复多遍,H5的优点:跨平台、迭代快、开发体验好。缺点:加载慢,用户体验差。所以在接下来很长一段时间内我将会从H5的几个缺点发面去研究如何优化。 一、缓存问题及其解决办法 ------------ 经常遇到一个问题,H5页面由于缓存问题经常在H5发布新版本之后
H5游戏开发:套圈圈
![](https://oscimg.oschina.net/oscnet/8e955a11c1b4be04937790dae3eacc4f896.jpg) 前言 虽然本文标题为介绍一个水压套圈h5游戏,但是窃以为仅仅如此对读者是没什么帮助的,毕竟读者们的工作生活很少会再写一个类似的游戏,更多的是面对需求的挑战。我更希望能举一反三,给大家在编写h
H5游戏开发:横屏适配
![](https://oscimg.oschina.net/oscnet/47de65ea09400742fe6f94e31617515ec36.jpg) 对于移动端的轻量级 HTML5 互动小游戏(简称为 H5 轻互动),如果从屏幕呈现模式来划分的话,可以归类为:竖屏式和横屏式。 ![](https://oscimg.oschina.
HTML5游戏开发凭什么这么火?看了你就知道了...
很多人都会问[H5游戏](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fedu.51cto.com%2Fcourse%2Fcourse_id-1307.html)有前途吗?其实我个人是比较看好H5的前景,尤其是在这个移动互联网的时代,Web技术的触角必然会深入到各个领域. 当然H5目前仍然
QQ浏览器赵俊:解读腾讯扶持HTM5游戏政策
手机QQ浏览器高级产品经理赵俊作为平台渠道方的代表,受邀出席了“TFC&LAYABOX大型HTML5金秋新品发布会”,并在发布会上分享了腾讯QQ浏览器对于H5游戏的扶持政策以及如何助力H5游戏。 **QQ浏览器在H5产业生态中的定位** 目前手机QQ浏览器是市场占有率和活跃度最高的浏览器,月活跃度2.5亿,腾讯将会逐步开放QQ浏览器的
10大H5前端框架
转发来源作者:https://www.cnblogs.com/kingboy2008/p/5261771.html 作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这里我还是低调的只拿出10个框架来个大锅乱炖
Creator模块介绍—领略模块化的力量
从Cocos2d-js到Creator,一直以来都有模块裁剪的能力,可以将游戏中没有用到的功能代码,在编译输时移除,从而减少包体大小,这对H5游戏来说影响比较明显。Creator比Cocos2d-js做的更好,通过主菜单->项目设置->模块设置有一个图形化的界面,可以方便模块配置。 ![](https://oscimg.oschina.net/oscnet
ExMobi+Agile Lite开发内置浏览器APP
微信对内置浏览器的定制封装,使得H5的流量入口再次重新被定义。在原生程序中使用H5也成为非常必要的一种搭配。这也得益于H5对于简单的浏览性质的内容可以很好的进行展现和传播。 由于在实际项目中有需要在移动端使用到H5,而大部分H5页面都是来源于网络的,所以这里尝试使用[ExMobi](https://www.oschina.net/action/GoToLi
GitHub中最强大的iOS Notifications和AlertView框架,没有之一!
![](https://static.oschina.net/uploads/img/201702/26233502_EckL.png) FFToast是一个非常强大的iOS message notifications和AlertView扩展。它可以很容易实现从屏幕顶部、屏幕底部和屏幕中间弹出一个通知。你可以很容易的自定义弹出的View. Git
OCRunner 第一篇:实现一个简单版热修复功能
> 作者: SilverFruity, https://github.com/SilverFruity > 小编寄语: > > > > 上一周我们发布了[《OCRunner 第零篇:从零教你写一个 iOS 热修复框架》](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fmp.we
Spring Boot从零入门1_详述
本文属于原创,转载注明出处,欢迎关注微信小程序`小白AI博客` 和微信公众号`别打名名`或者网站 https://xiaobaiai.net 或者我的CSDN http://blog.csdn.net/freeape ![](https://oscimg.oschina.net/oscnet/f8db20c4-f396-4337-b76d-c956a3a8