前言
網(wǎng)上有許多開(kāi)源的可視化大屏項(xiàng)目，但是分析之后，還是想自己從 0 搭建一個(gè)可視化大屏項(xiàng)目，畢竟 Vue 一直在更新，自己搭建的可以使用最新版本的 Vue ,如果對(duì)版本沒(méi)有太多要求的小伙伴們選擇那些開(kāi)源項(xiàng)目的基礎(chǔ)上去修改也是很不錯(cuò)的。其次自己搭建一個(gè)項(xiàng)目，可以更好的了解具體的實(shí)現(xiàn)方式。當(dāng)然這個(gè)項(xiàng)目中還是會(huì)引用一些組件庫(kù)。
創(chuàng)建 Vue3 + TypeScript + Vite 項(xiàng)目
這里就不過(guò)多去介紹了，創(chuàng)建項(xiàng)目大家都會(huì)，我這里就使用 WebStorm 去創(chuàng)建一個(gè)項(xiàng)目，node 我選用 18.6.0版本的
項(xiàng)目創(chuàng)建好之后，我們先來(lái)引入一個(gè)組件庫(kù) DataV Vue3。這個(gè)組件庫(kù)是在 DataV 的基礎(chǔ)上重構(gòu)的
引入 DataV Vue3
- 首先為什選擇 DataV Vue3 ，是因?yàn)?DataV 雖然有 Vue2，Vue3，React 各個(gè)版本的，但是 Vue3 版本的不支持 Vite
- 其次，為什么要使用 DataV Vue3 ，是因?yàn)檫@里為我們封裝好了一些酷炫的邊框、裝飾、圖表之類(lèi)的組件，我們可以拿過(guò)來(lái)直接使用
- 安裝
npm install @kjgl77/datav-vue3
- 全局引入(也可以按需引入，考慮到每個(gè)頁(yè)面都可能會(huì)用到，所以這里直接在 main.ts 中全局引入)
// main.ts中全局引入
import {
createApp } from 'vue'
import DataVVue3 from '@kjgl77/datav-vue3'
const app = createApp(App)
app.use(DataVVue3)
app.mount('#app')
接下來(lái)就該屏幕適配的問(wèn)題了，雖然 DataV Vue3 中有全局容器 <dv-full-screen-container>，但是官方文檔中建議在全屏容器內(nèi)使用百分比搭配 flex 進(jìn)行布局，以便于在不同的分辨率下得到較為一致的展示效果。 并且使用前請(qǐng)注意將 body 的 margin 設(shè)為 0 ，否則會(huì)引起計(jì)算誤差，全屏后不能完全充滿屏幕。我還是傾向于直接使用 px 或者 vw、vh 布局，所以打算自己去進(jìn)行屏幕的適配。
屏幕適配
屏幕適配大概有這幾種方式：rem、scale、vw 和 vh、以及 DataV Vue3 中的全局容器，這些方式都可以很好的去進(jìn)行適配，具體選用哪種方法就看各人的喜好以及項(xiàng)目的需求了。個(gè)人比較推薦 scale 這種方式，所以這里就采用 scale 方式來(lái)進(jìn)行屏幕適配
scale 方式
實(shí)現(xiàn)思路
scale 方式，大家都知道就是等比例縮放。一般情況下，我們的設(shè)計(jì)稿尺寸都是 1920*1080 （具體尺寸可以提前和 UI 溝通好），我們就以這個(gè)尺寸作為我們需要保持的默認(rèn)的寬高比例，然后我們使用 window.innerWidth 、 window.innerHeight 獲取瀏覽器窗口內(nèi)部的寬度和高度，之后根據(jù)瀏覽器窗口內(nèi)部的寬高比和默認(rèn)的寬高比來(lái)計(jì)算出需要縮放的比例就可以了。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-438511.html
代碼
我們對(duì)其進(jìn)行封裝提取，在 utils 文件夾中新建一個(gè) scalingRatio.ts 文件文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-438511.html
import {
ref } from 'vue'
export default function useDraw() {
// 指向最外層容器
const appRef = ref()
// 定時(shí)函數(shù)
const timer = ref(0)
// 默認(rèn)縮放值
const scale = {
width: '1',
height: '1',
}
// 設(shè)計(jì)稿尺寸（px）
const baseWidth = 1920
const baseHeight = 1080
// 需保持的比例
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
const calcRate = () => {
// 當(dāng)前寬高比
const currentRate = parseFloat((window.innerWidth / window到了這里，關(guān)于Vue3 + Vite + TypeScript + dataV 打造可視化大屏的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
