使用VUE實(shí)現(xiàn)可視化大屏的適配思路總結(jié)（文末送vue版可視化大屏源碼）

頁(yè)面布局

在拿到設(shè)計(jì)圖后，通常會(huì)先通過設(shè)計(jì)圖的布局來思考代碼的設(shè)計(jì)，這也是開始著手寫代碼前必須要進(jìn)行的一步，在項(xiàng)目中，我曾遇到，在一張大屏圖開發(fā)到一半的時(shí)候介入，和另一個(gè)前端一起進(jìn)行開發(fā)，結(jié)果由于她將整張圖上的所有圖表都放到一個(gè)vue文件里面，結(jié)果導(dǎo)致整個(gè)頁(yè)面的代碼數(shù)量級(jí)達(dá)到上千行，并且介入合作后，由于兩人在一個(gè)文件里面進(jìn)行開發(fā)，常常會(huì)導(dǎo)致提交代碼時(shí)要合并沖突，經(jīng)過這個(gè)教訓(xùn)后，在二期進(jìn)行重構(gòu)時(shí)，第一步就是對(duì)整個(gè)頁(yè)面進(jìn)行拆分，這樣不僅能更好的分工合作，而且也利于后期代碼的維護(hù)。（其實(shí)大多數(shù)開發(fā)人員都會(huì)這樣做，寫出來只是給自己提個(gè)醒）

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

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

2.模塊化開發(fā)

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

屏幕適配

1.使用flexible

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

• 在本地以js文件的方式引入到大屏頁(yè)面（在這里并未采用全局安裝的方式，原因是在項(xiàng)目中，大屏頁(yè)面僅是其中一部分，其他頁(yè)面并不需要適配，因此，并未采用在main.js中引用的方式，同樣，也不采用全局px轉(zhuǎn)rem的方式，而是在引入頁(yè)面單獨(dú)使用rem）

• 打開flexible.js文件，設(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)行開發(fā)時(shí)，推薦使用px2rem插件

在應(yīng)用商店下載后，打開vs code的設(shè)置，搜索rootFontSize，將數(shù)值改成px轉(zhuǎn)換成rem的數(shù)值（以上述為例，flexible.js中80px = 1rem，那么rootFontSize應(yīng)設(shè)置成80），保存后重啟，打開大屏頁(yè)面，在中輸入px會(huì)自動(dòng)顯示出經(jīng)過換算后的rem 

echarts使用

1.vue引入echarts

• 安裝echarts依賴

npm install echarts -S

• 引入echarts 1. 全局引入

// main.js import echarts from 'echarts' Vue.prototype.$echarts = echarts復(fù)制代碼// 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.頁(yè)面中引入

// 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的實(shí)例化對(duì)象需在mounted中實(shí)現(xiàn)，原因是要確保dom元素已經(jīng)掛載到頁(yè)面中

2.echarts使用

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

//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[/\\]/]...

總結(jié)

大屏可視化是我們?cè)趯?shí)際項(xiàng)目中經(jīng)常會(huì)遇到的需求，但在做的時(shí)候，又需要花費(fèi)很多心思，本文也僅是介紹一種設(shè)配方案，要真的完成一個(gè)可視化界面，還是得多花點(diǎn)心思，關(guān)注css細(xì)節(jié)，盡量還原設(shè)計(jì)圖。

3個(gè) Vue 可視化大屏案例展示（vue 2.0 & echarts）

以下是可視化大屏案例展示，如果你需要此案例源碼，請(qǐng)關(guān)注“前端達(dá)人”公眾號(hào)，回復(fù)“vue大屏”獲取