可视化大屏自适应

最新推荐文章于 2024-03-28 17:30:53 发布

-mmmmmmsui

最新推荐文章于 2024-03-28 17:30:53 发布

阅读量2.4k

点赞数 2

文章标签：前端 javascript 大屏端 vscode elementui

本文链接：https://blog.csdn.net/weixin_47521196/article/details/126094547

版权

可视化大屏自适应完成步骤

一，配置lib-flexible和 px2remLoader

1.安装依赖

npm install px2rem-loader -D
npm install lib-flexible -S

2.引入依赖

main.js引入lib-flexible

import 'lib-flexible'

3.px转换成rem

vue-loader的options和其他样式文件loader最终是都是由build/utils.js里的方法生成的，我们只需在cssLoader后再加上一个px2remLoader即可，px2rem-loader的remUnit选项意思是 1rem=多少像素，结合lib-flexible的方案，我们将px2remLoader的options.remUnit设置成设计稿宽度的1/10，这里假设设计稿宽为1920px

build/utils.js中添加px2remLoader

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // 增加代码，px转rem配置（需要将px2remloader添加进loaders数组中）
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192,  //根据视觉稿，rem为px的十分之一，1920px  192 rem
      // remPrecision: 8//换算的rem保留几位小数点
    }
  }

// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
   const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

   if (loader) {
     loaders.push({
       loader: loader + '-loader',
       options: Object.assign({}, loaderOptions, {
         sourceMap: options.sourceMap
       })
     })
   }
   //...
 }

4.修改node_modules\lib-flexible\flexible.js

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = width * dpr;//这里的540修改成width
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

5.去除滚动条

在index.html中加上overflow: hidden

<!DOCTYPE html>
<html style="overflow: hidden;">
  <head>
......

二、echarts自适应

1.在每个echarts组件中配置

<template>
 <div class="chaa" >
     <div class="chart" id="mzgb" > 
     </div>
    
</div>
</template>
<script>
    export default {
        data () {
            return {

            }
        },
        mounted(){
          this.chart();
        },
        methods: {
          chart() {
             //当前视口宽度
      let nowClientWidth = document.documentElement.clientWidth;
      // 换算方法
      let nowSize = function (val, initWidth = 1920) {
        return val * (nowClientWidth / initWidth);
      };

            let myChart = this.$echarts.init(document.getElementById('mzgb'))
            myChart.setOption({

......
......
      });
     // myChart.setOption(option, true);
        window.addEventListener('resize', () => {
        // 自动渲染echarts
        myChart.resize()
      })
          
    },

   },
      
    }
</script>

2.使用方法

在每个需要设置size的地方使用nowSize()

fontSize: nowSize(24)

三、整体布局

//整个
.home{  
width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  background-image: url("...");
}
//每个组件
.a{
height:20vh;
}
.b{
height:30vh;
}
.c{
height:50vh;
}