VUE大屏視覺化適配方案

頁面佈局

在拿到設計圖後，通常會先通過設計圖的佈局來思考程式碼的設計，這也是開始著手寫程式碼前必須要進行的一步，在項目中，我曾遇到，在一張大屏圖開發到一半的時候介入，和另一個前端一起進行開發，結果由於她將整張圖上的所有圖表都放到一個vue檔案裡面，結果導致整個頁面的程式碼數量級達到上千行，並且介入合作後，由於兩人在一個檔案裡面進行開發，常常會導致提交程式碼時要合併衝突，經過這個教訓後，在二期進行重構時，第一步就是對整個頁面進行拆分，這樣不僅能更好的分工合作，而且也利於後期程式碼的維護。（其實大多數開發人員都會這樣做，寫出來只是給自己提個醒）

1.劃分頁面 通常情況下，大屏圖都是由一個一個的圖表組成的，並且在考慮美觀的情況下，UI設計師會把圖設計成方方正正的模組，這裡列舉兩個佈局:

圖1可劃分為左中右，圖2可劃分為上中下，劃分完之後，在根據具體的設計圖再劃分成更小的模組。

2.模組化開發

在劃分完頁面之後，對於具體的模組，應將其列成一個單獨的vue頁面來進行開發，然後將所有的模組都以元件的形式引入到index頁面，形成最終的大屏頁面。

螢幕適配

1.使用flexible

對於PC端的螢幕適配，網上有很多解決方案，這裡不展開贅述，感興趣者可自行百度。我所採用的方式是阿里的flexible.js。具體方案如下

在本地以js檔案的方式引入到大屏頁面（在這裡並未採用全局安裝的方式，原因是在項目中，大屏頁面僅是其中一部分，其他頁面並不需要適配，因此，並未採用在main.js中引用的方式，同樣，也不採用全局px轉rem的方式，而是在引入頁面單獨使用rem）開啟flexible.js檔案，設定1rem所對應的px數量，以設計稿1920px為例，將其等分成24等份，那麼1rem = 80px由於上述原因，需在大屏頁面中，手動將用到的px以80px = 1rem的換算形式換算成rem，為避免每次都需手動計算rem的弊端，如果使用vs code進行開發時，推薦使用px2rem插件

在應用商店下載後，開啟vs code的設定，搜尋rootFontSize，將數值改成px轉換成rem的數值（以上述為例，flexible.js中80px = 1rem，那麼rootFontSize應設定成80），儲存後重啟，開啟大屏頁面，在中輸入px會自動顯示出經過換算後的rem

echarts使用

1.vue引入echarts

安裝echarts依賴

npm install echarts -S

引入echarts 1. 全局引入

// main.js import echarts from 'echarts' Vue.prototype.$echarts = echarts複製程式碼

// echarts.vue<template> ... <div id="myChart" :style="{width: '300px', height: '300px'}"></div> ...</template><script> ... methods:{ drawEcharts(){ let myChart = this.$echarts.init(document.getElementById('myChart')) ... } }...</script>複製程式碼

2.頁面中引入

// echarts.vue<template> ... <div id="myChart" :style="{width: '300px', height: '300px'}"></div> ...</template><script> import echarts from 'echarts' ... methods:{ drawEcharts(){ let myChart = echarts.init(document.getElementById('myChart')) ... } }...</script>複製程式碼

注意：echarts的例項化物件需在mounted中實現，原因是要確保dom元素已經掛載到頁面中

2.echarts使用

echarts的使用可到官網去檢視相關參數，還可到echarts社群去檢視相關示例，另外，推薦一下dataV,在這上面可以選一些好看的邊框和圖表，但是需要注意的是，dataV在低版本瀏覽器和IE上面並不相容，在此次項目中又剛好需要相容IE，因此，我採用的解決方案是：1.安裝babel-polyfill npm install --save-dev babel-polyfill 2.引入babel-polyfill

//main.jsimport 'babel-polyfill'複製程式碼

vue-cli版本為2

//webpack.base.conf.js....{ test: /.js$/, loader: 'babel-loader', include: [resolve('node_modules/@jiaminghi/data-view')]},...複製程式碼

vue-cli版本為3或以上

//vue.config.js...transpileDependencies: [/[/]node_modules[/][@]jiaminghi[/]data-view[/]/]...複製程式碼

總結

大屏視覺化是我們在實際項目中經常會遇到的需求，但在做的時候，又需要花費很多心思，本文也僅是介紹一種設配方案，要真的完成一個視覺化介面，還是得多花點心思，關注css細節，儘量還原設計圖。

轉自：https://juejin.cn/post/6940790455701356552