vue大屏可視化適配方案

2023年12月6日發(fā)(作者：去世)

-

vue大屏可視化適配方案

寫(xiě)在前面的話(huà)

第一次接觸到大屏可視化的時(shí)候，毫無(wú)頭緒，習(xí)慣性打開(kāi)簡(jiǎn)書(shū)和掘金，在上面搜索優(yōu)秀的大佬們的解決方案，看過(guò)多篇文

章以及總結(jié)在實(shí)際項(xiàng)目中的踩過(guò)的坑，把大屏可視化分成三個(gè)部分：頁(yè)面布局、屏幕適配和echarts使用，因此本文全篇

基于這三點(diǎn)來(lái)進(jìn)行說(shuō)明（第一次寫(xiě)技術(shù)文章，當(dāng)成自己做完項(xiàng)目的總結(jié)了）

頁(yè)面布局

在拿到設(shè)計(jì)圖后，通常會(huì)先通過(guò)設(shè)計(jì)圖的布局來(lái)思考代碼的設(shè)計(jì)，這也是開(kāi)始著手寫(xiě)代碼前必須要進(jìn)行的一步，在項(xiàng)目中，我曾遇到，在一張大屏

圖開(kāi)發(fā)到一半的時(shí)候介入，和另一個(gè)前端一起進(jìn)行開(kāi)發(fā)，結(jié)果由于她將整張圖上的所有圖表都放到一個(gè)vue文件里面，結(jié)果導(dǎo)致整個(gè)頁(yè)面的代碼數(shù)

量級(jí)達(dá)到上千行，并且介入合作后，由于兩人在一個(gè)文件里面進(jìn)行開(kāi)發(fā)，常常會(huì)導(dǎo)致提交代碼時(shí)要合并沖突，經(jīng)過(guò)這個(gè)教訓(xùn)后，在二期進(jìn)行重構(gòu)

時(shí)，第一步就是對(duì)整個(gè)頁(yè)面進(jìn)行拆分，這樣不僅能更好的分工合作，而且也利于后期代碼的維護(hù)。（其實(shí)大多數(shù)開(kāi)發(fā)人員都會(huì)這樣做，寫(xiě)出來(lái)只是

給自己提個(gè)醒）

1.劃分頁(yè)面

通常情況下，大屏圖都是由一個(gè)一個(gè)的圖表組成的，并且在考慮美觀(guān)的情況下，UI設(shè)計(jì)師會(huì)把圖設(shè)計(jì)成方方正正的模塊，這里列舉兩個(gè)布局:

圖1

圖2

圖1可劃分為左中右，圖2可劃分為上中下，劃分完之后，在根據(jù)具體的設(shè)計(jì)圖再劃分成更小的模塊。

2.模塊化開(kāi)發(fā)

在劃分完頁(yè)面之后，對(duì)于具體的模塊，應(yīng)將其列成一個(gè)單獨(dú)的vue頁(yè)面來(lái)進(jìn)行開(kāi)發(fā)，然后將所有的模塊都以組件的形式引入到index頁(yè)面，形成最

終的大屏頁(yè)面。

示例

屏幕適配

1.使用flexible

對(duì)于PC端的屏幕適配，網(wǎng)上有很多解決方案，這里不展開(kāi)贅述，感興趣者可自行百度。我所采用的方式是阿里的。具體方案如下

在本地以js文件的方式引入到大屏頁(yè)面（在這里并未采用全局安裝的方式，原因是在項(xiàng)目中，大屏頁(yè)面僅是其中一部分，其他頁(yè)面并不需要適

配，因此，并未采用在中引用的方式，同樣，也不采用全局px轉(zhuǎn)rem的方式，而是在引入頁(yè)面單獨(dú)使用rem）

打開(kāi)文件，設(shè)置1rem所對(duì)應(yīng)的px數(shù)量，以設(shè)計(jì)稿1920px為例，將其等分成24等份，那么1rem = 80px

由于上述原因，需在大屏頁(yè)面中，手動(dòng)將用到的px以80px = 1rem的換算形式換算成rem，為避免每次都需手動(dòng)計(jì)算rem的弊端，如果使用

vs code進(jìn)行開(kāi)發(fā)時(shí)，推薦使用px2rem插件

在應(yīng)用商店下載后，打開(kāi)vs code的設(shè)置，搜索rootFontSize，將數(shù)值改成px轉(zhuǎn)換成rem的數(shù)值（以上述為例，中80px = 1rem，那

么rootFontSize應(yīng)設(shè)置成80），保存后重啟，打開(kāi)大屏頁(yè)面，在中輸入px會(huì)自動(dòng)顯示出經(jīng)過(guò)換算后的rem

echarrts使用ts使用

引入echarts

安裝echarts依賴(lài)

npm install echarts -S

引入echarts

1. 全局引入

//

import echarts from 'echarts'

ype.$echarts = echarts

//

2.頁(yè)面中引入

//

注意：echarts的實(shí)例化對(duì)象需在mounted中實(shí)現(xiàn)，原因是要確保dom元素已經(jīng)掛載到頁(yè)面中

s使用

echarts的使用可到官網(wǎng)去查看相關(guān)參數(shù)，還可到echarts社區(qū)去查看相關(guān)示例，另外，推薦一下dataV,在這上面可以選一些好看的邊框和圖表，

但是需要注意的是，dataV在低版本瀏覽器和IE上面并不兼容，在此次項(xiàng)目中又剛好需要兼容IE，因此，我采用的解決方案是：

1.安裝babel-polyfill

npm install --save-dev babel-polyfill

2.引入babel-polyfill

//

import 'babel-polyfill'

vue-cli版本為2

//.

...

{

test: /.js$/,

loader: 'babel-loader',

include: [resolve('node_modules/@jiaminghi/data-view')]

},

...

vue-cli版本為3或以上

//

...

transpileDependencies: [/[/]node_modules[/][@]jiaminghi[/]data-view[/]/]

...

總結(jié)

大屏可視化是我們?cè)趯?shí)際項(xiàng)目中經(jīng)常會(huì)遇到的需求，但在做的時(shí)候，又需要花費(fèi)很多心思，本文也僅是介紹一種設(shè)配方

案，要真的完成一個(gè)可視化界面，還是得多花點(diǎn)心思，關(guān)注css細(xì)節(jié)，盡量還原設(shè)計(jì)圖。

-