vue大屏可視化適配的方法

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

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

圖1

圖2

圖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），保存后重啟，打開大屏頁面，在<style></style>中輸入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[/\\]/]...

讀到這里，這篇“vue大屏可視化適配的方法”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。