文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

从零开发可视化大屏制作平台的方法教程

2024-04-02 19:55

关注

本篇文章为大家展示了从零开发可视化大屏制作平台的方法教程,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

你将收获

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

效果预览

从零开发可视化大屏制作平台的方法教程

从零开发可视化大屏制作平台的方法教程

从零开发可视化大屏制作平台的方法教程

方案实现

可视化大屏产品设计思路

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

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

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

从零开发可视化大屏制作平台的方法教程

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

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

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

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

大屏编辑器设计思路

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

如下图所示:

 从零开发可视化大屏制作平台的方法教程

组件库我们可以用任何组件封装方式(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的智能网格拖拽. 这里笔者选择自由拖拽来实现. 已有的有:

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

从零开发可视化大屏制作平台的方法教程

具体拖拽流程就是:

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

  2. 使用H5 dragable API拖拽左侧组件(component data)进入目标容器(targetBox)

  3. 监听拖拽结束事件拿到拖拽事件传递的data来渲染真实的可视化组件

  4. 可视化组件挂载, schema注入编辑面板, 编辑面板渲染组件属性编辑器

  5. 拖拽, 属性修改, 更新

  6. 预览, 发布

组件的schema参考Dooring DSL设计

可视化大屏数据自治探索

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

从零开发可视化大屏制作平台的方法教程

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

从零开发可视化大屏制作平台的方法教程

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

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

辅助功能

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

撤销重做

撤销重做功能我们可以使用已有的库比如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,     )})`;   } });

上述内容就是从零开发可视化大屏制作平台的方法教程,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯