本文小編為大家詳細(xì)介紹“vue大屏可視化適配的方法”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue大屏可視化適配的方法”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

創(chuàng)新互聯(lián)公司主營富寧網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,App定制開發(fā),富寧h5微信小程序定制開發(fā)搭建,富寧網(wǎng)站營銷推廣歡迎富寧等地區(qū)企業(yè)咨詢

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

圖1

圖2

圖1可劃分為左中右，圖2可劃分為上中下，劃分完之后，在根據(jù)具體的設(shè)計(jì)圖再劃分成更小的模塊。
2.模塊化開發(fā)
在劃分完頁面之后，對于具體的模塊，應(yīng)將其列成一個(gè)單獨(dú)的vue頁面來進(jìn)行開發(fā)，而后將所有的模塊都以組件的形式引入到index頁面，形成最終的大屏頁面。

示例

屏幕適配

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

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

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

• 因?yàn)樯鲜銎鹨颍柙诖笃另撁嬷?，手動將用到的px以80px = 1rem的換算形式換算成rem，為避免每次都需手動計(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），保存后重啟，打開大屏頁面，在中輸入px會自動顯示出經(jīng)過換算后的rem

echarts使用

1.vue引入echarts

• 安裝echarts依賴
  npm install echarts -S

• 引入echarts
  1. 全局引入

// main.js import echarts from 'echarts' Vue.prototype.$echarts = echarts

// echarts.vue

2.頁面中引入

// echarts.vue

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

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

讀到這里，這篇“vue大屏可視化適配的方法”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。