從零開發一款可視化大屏製做平臺

幾個月前開源的H5頁面製做平臺H5-Dooring 收到了不少熱心的反饋和交流, 順着筆者以前的規劃, 咱們又作了一款可視化大屏編輯器V6.Dooring. 接下來筆者就來帶你們一塊兒看看咱們的方案設計和技術實現.javascript

你將收穫

可視化大屏產品設計思路
主流可視化圖表庫技術選型
大屏編輯器設計思路
大屏可視化編輯器Schema設計
用戶數據自治探索

在介紹以前, 咱們先看看實現的效果展現.css

效果預覽

方案實現

可視化大屏產品設計思路

目前不少企業或多或少的面臨「信息孤島」問題，各個系統平臺之間的數據沒法實現互通共享，難以實現一體化的數據分析和實時呈現。html

相比於傳統手工定製的圖表與數據儀表盤，可視化大屏製做平臺的出現，能夠打破抵消的定製開發, 數據分散的問題，經過數據採集、清洗、分析到直觀實時的數據可視化展示，可以多方位、多角度、全景展示各項指標，實時監控，動態一目瞭然。前端

針對以上需求, 咱們設計了一套可視化大屏解決方案, 具體包含以下幾點:vue

上圖是筆者4個月前設計的基本草圖, 後期會持續更新. 經過以上的設計分解, 咱們基本能夠搭建一個可本身定製的數據大屏.java

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

目前筆者調研的已知主流可視化庫有:node

echart 一個基於 JavaScript 的老牌開源可視化圖表庫
D3.js 一個數據驅動的可視化庫, 能夠不須要其餘任何框架獨立運行在現代瀏覽器中，它結合強大的可視化組件來驅動 DOM 操做
antv 包含一套完整的可視化組件體系
Chart.js 基於 HTML5 的簡單易用的 JavaScript 圖表庫
metrics-graphics 創建在D3之上的可視化庫, 針對可視化和佈置時間序列數據進行了優化
C3.js 經過包裝構造整個圖表所需的代碼，使生成基於D3的圖表變得容易

咱們使用以上任何一個庫均可以實現咱們的可視化大屏搭建的需求, 各位能夠根據喜愛來選擇.react

大屏編輯器設計思路

在上面的分析中咱們知道一個大屏編輯器須要有個編輯器核心, 主要包含如下部分:webpack

組件庫
拖拽(自由拖拽, 參考線, 自動提示)
畫布渲染器
屬性編輯器

以下圖所示: css3

組件庫咱們能夠用任何組件封裝方式(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

等等. 具體拖拽呈現流程以下:

具體拖拽流程就是:

使用H5 dragable API拖拽左側組件(component data)進入目標容器(targetBox)
監聽拖拽結束事件拿到拖拽事件傳遞的data來渲染真實的可視化組件
可視化組件掛載, schema注入編輯面板, 編輯面板渲染組件屬性編輯器
拖拽, 屬性修改, 更新
預覽, 發佈

組件的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, )})`;
  }
});
複製代碼

詳細源碼可參考: H5-Dooring | 參考線設計源碼

後期規劃

最近咱們的主要方向是H5-Dooring編輯器2.0的開發和可視化大屏搭建平臺的升級和優化, 後面會出線上版demo, 歡迎你們把玩.

下期精彩

3D可視化組件設計方案
數據可視化監控平臺設計
可視化大屏的數據治理和實時數據呈現
H5-Dooring 2.0版本技術分享

往期推薦

覆盤node項目中遇到的13+常見問題和解決方案

如何搭積木式的快速開發H5頁面?

手擼一個在線css三角形生成器

前端高效開發必備的 js 庫梳理

以爲有用？喜歡就收藏，順便點個贊吧，你的支持是我最大的鼓勵！微信搜「趣談前端」，發現更多有趣的H5遊戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數據可視化等前端知識和實戰.