小米官宣：2023年上半年出貨量中國第一！
今日早間，小米電視官方微博帶來消息，稱2023年小米電視上半年出貨量達到了中國第一，同時還表示小米電視的巨屏風暴即將開始。“公布一個好消息2023年#小米電視上半年出貨量中國
幾年前開源的H5頁面制作平臺H5-Dooring 收到了很多熱心的反饋和交流, 順著筆者之前的規劃, 又做了一款可視化大屏編輯器V6.Dooring. 接下來筆者就來帶大家一起看看我們的方案設計和技術實現.
在介紹之前, 我們先看看實現的效果展示.
圖片
圖片
目前很多企業或多或少的面臨“信息孤島”問題，各個系統平臺之間的數據無法實現互通共享，難以實現一體化的數據分析和實時呈現。
相比于傳統手工定制的圖表與數據儀表盤，可視化大屏制作平臺的出現，可以打破抵消的定制開發, 數據分散的問題，通過數據采集、清洗、分析到直觀實時的數據可視化展現，能夠多方位、多角度、全景展現各項指標，實時監控，動態一目了然。
針對以上需求, 我們設計了一套可視化大屏解決方案, 具體包含如下幾點:
圖片
上圖是筆者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的智能網格拖拽. 這里筆者選擇自由拖拽來實現. 已有的有:
等等. 具體拖拽呈現流程如下:
圖片
具體拖拽流程就是:
組件的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, )})`; }});詳細源碼可參考: H5-Dooring | 參考線設計源碼
最近我們的主要方向是H5-Dooring編輯器2.0的開發和可視化大屏搭建平臺的升級和優化, 后面會出線上版demo, 歡迎大家把玩。
本文鏈接：http://m.www897cc.com/showinfo-26-11889-0.html從零開發可視化大屏制作平臺
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 深入理解 RocketMQ 廣播消費
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號