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

你所需要的網(wǎng)站建設(shè)服務(wù)，我們均能行業(yè)靠前的水平為你提供.標準是產(chǎn)品質(zhì)量的保證，主要從事網(wǎng)站制作、網(wǎng)站設(shè)計、企業(yè)網(wǎng)站建設(shè)、成都做手機網(wǎng)站、網(wǎng)頁設(shè)計、品牌網(wǎng)站設(shè)計、網(wǎng)頁制作、做網(wǎng)站、建網(wǎng)站。成都創(chuàng)新互聯(lián)擁有實力堅強的技術(shù)研發(fā)團隊及素養(yǎng)的視覺設(shè)計專才。

你將收獲

• 可視化大屏產(chǎn)品設(shè)計思路

• 主流可視化圖表庫技術(shù)選型

• 大屏編輯器設(shè)計思路

• 大屏可視化編輯器Schema設(shè)計

• 用戶數(shù)據(jù)自治探索

在介紹之前, 我們先看看實現(xiàn)的效果展示.

效果預(yù)覽

方案實現(xiàn)

可視化大屏產(chǎn)品設(shè)計思路

目前很多企業(yè)或多或少的面臨“信息孤島”問題，各個系統(tǒng)平臺之間的數(shù)據(jù)無法實現(xiàn)互通共享，難以實現(xiàn)一體化的數(shù)據(jù)分析和實時呈現(xiàn)。

相比于傳統(tǒng)手工定制的圖表與數(shù)據(jù)儀表盤，可視化大屏制作平臺的出現(xiàn)，可以打破抵消的定制開發(fā),  數(shù)據(jù)分散的問題，通過數(shù)據(jù)采集、清洗、分析到直觀實時的數(shù)據(jù)可視化展現(xiàn)，能夠多方位、多角度、全景展現(xiàn)各項指標，實時監(jiān)控，動態(tài)一目了然。

針對以上需求, 我們設(shè)計了一套可視化大屏解決方案, 具體包含如下幾點:

上圖是筆者4個月前設(shè)計的基本草圖, 后期會持續(xù)更新. 通過以上的設(shè)計分解, 我們基本可以搭建一個可自己定制的數(shù)據(jù)大屏.

主流可視化圖表庫技術(shù)選型

目前筆者調(diào)研的已知主流可視化庫有:

• echart一個基于 JavaScript 的老牌開源可視化圖表庫

• D3.js一個數(shù)據(jù)驅(qū)動的可視化庫, 可以不需要其他任何框架獨立運行在現(xiàn)代瀏覽器中，它結(jié)合強大的可視化組件來驅(qū)動 DOM 操作

• antv包含一套完整的可視化組件體系

• Chart.js基于 HTML5 的 簡單易用的 JavaScript 圖表庫

• metrics-graphics建立在D3之上的可視化庫, 針對可視化和布置時間序列數(shù)據(jù)進行了優(yōu)化

• C3.js通過包裝構(gòu)造整個圖表所需的代碼，使生成基于D3的圖表變得容易

我們使用以上任何一個庫都可以實現(xiàn)我們的可視化大屏搭建的需求, 各位可以根據(jù)喜好來選擇.

大屏編輯器設(shè)計思路

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

• 組件庫

• 拖拽(自由拖拽, 參考線, 自動提示)

• 畫布渲染器

• 屬性編輯器

如下圖所示:

組件庫我們可以用任何組件封裝方式(react/vue等), 這里沿用H5-Dooring的可視化組件設(shè)計方式, 對組件模型進行優(yōu)化和設(shè)計.

類似的代碼如下:

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: 處理數(shù)據(jù)       const dataX = data.map(item => ({ ...item, value: Number(item.value) }));        // Step 2: 載入數(shù)據(jù)源       chart.source(dataX);        // Step 3：創(chuàng)建圖形語法，繪制柱狀圖，由 genre 和 sold 兩個屬性決定圖形位置，genre 映射至 x 軸，sold 映射至 y 軸       chart         .interval()         .position('name*value')         .color('name');        // Step 4: 渲染圖表       chart.render();   }, [data]);   return (                     {title}