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

一，配置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;
}

# 前端 # javascript # 大屏端 # vscode # elementui
Logo
智屏生态联盟

智屏生态联盟致力于大屏生态发展，利用大屏快应用技术降低开发者开发、发布大屏应用门槛

更多推荐

taro 引用本地图片展示

import { Image } from ‘@tarojs/components’<引用标签>constructor(){super()this.state={img:require(’./case.png’)}}…

avatar 智屏生态联盟

Weex

Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。快速开始高性能Weex 使用原生组件和原生模块，来最大化利用原生渲染的性能优势以及平台能力，所有的组件和模块都是可插拔、可扩展的。跨平台你可以使用同一份代码编译成不同目标文件分别在 Web、Android 和 iOS 平台上运行。原生的组件和模块在不同平台中有不同的实现，但是它们都提供了相同的...

avatar 智屏生态联盟

Taro写小程序总结

1.首先需要在『微信公众平台』注册帐号，我一直很困惑为啥，微信公众平台不能和微信开放平台整合，而且账号不能通用~https://mp.weixin.qq.com2.在微信公从平台里的->开发->服务器域名,可以配置小程序中可以访问的接口的域名3.在『成员管理』中可以添加开发者、体验者等成员。方便协作办工Taro的一些例子：1.转发在render中写&...

avatar 智屏生态联盟