從零開發可視化大屏制作平臺的方法教程

本篇文章為大家展示了從零開發可視化大屏制作平臺的方法教程，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

你將收獲

• 可視化大屏產品設計思路

• 主流可視化圖表庫技術選型

• 大屏編輯器設計思路

• 大屏可視化編輯器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. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2. 使用H5 dragable API拖拽左側組件(component data)進入目標容器(targetBox)

3. 監聽拖拽結束事件拿到拖拽事件傳遞的data來渲染真實的可視化組件

4. 可視化組件掛載, schema注入編輯面板, 編輯面板渲染組件屬性編輯器

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

6. 預覽, 發布

組件的schema參考Dooring DSL設計

可視化大屏數據自治探索

目前我們實現的搭建平臺可以靜態的設計數據源, 也可以注入第三方接口, 如下:

我們可以調用內部接口來實時獲取數據, 這塊在可視化監控平臺用的場景比較多, 方式如下:

參數(params)編輯區可以自定義接口參數. 代碼編輯器筆者這里推薦兩款, 大家可以選用:

• react-monaco-editor

• react-codemirror2

使用以上之一可以實現mini版vscode, 大家也可以嘗試一下.

輔助功能

可視化大屏一鍵截圖 一鍵截圖功能還是沿用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,     )})`;   } });

上述內容就是從零開發可視化大屏制作平臺的方法教程，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。