公司要开发数据可视化大屏，研究了几天资料，把自己的研究成果发出来，希望能够帮到大家（内容较长）。 ## 方法一：利用css的transform属性以及设计百分比以及scal（）方法：第一步：先写一个组件，width = 100vw,height = 100%,作为大屏展示的背景 ``` ``` 第二步：.根据设计同学提供的设计图可以计算出每部分区域的百分比，例如总尺寸是w*h，其中一个图标宽高是w1 * h1，实现常规切图，此时由1-->2可得： ``` ``` 第三步：基于第二步，需要根据大屏具体尺寸计算缩放比例，以及设置缩放比例，需要注意的是，绑定resize事件一定别忘了防抖，页面销毁别忘了移除监听事件： ``` ``` 第四步：到这大部分已经完成，只要往插槽放组件就行了 ![企业微信截图_16357563933770.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ec9f10b7e62427aa05c443f5c07790b~tplv-k3u1fbpfcp-watermark.image?) data文件夹下各个.vue的解释： chart.vue是数据可视化页面； ScreenAdapter.vue是页面自适应组件； Card.vue是每个图表的外框；其他的都是每一个图表 Chart.vue页面如下： ![企业微信截图_16357566257336.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/410a35bb39e14df39c51a364be9215b1~tplv-k3u1fbpfcp-watermark.image?) #### 页面适配效果如下 2000*1500 ![企业微信截图_16357568614800.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a6adce82a2eb4962abdafe5b3cb77a02~tplv-k3u1fbpfcp-watermark.image?) 1600*1200 ![企业微信截图_16357574935654.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0fc5a5210fa240cfa385ffc6360b2f56~tplv-k3u1fbpfcp-watermark.image?) ## ## 方法二：大屏vw和vh适配方案：常见的屏幕分辨率 - 1280 * 720：老式电脑的屏幕，目前很少见到 - 1366 * 768 ：普通液晶显示器 - 1920 * 1080：高清液晶显示器 - 2560 * 1440： 2K高清显示器 - 3840 * 2160： 4K高清显示器自适应的难点 - 要兼容不同屏幕尺寸的分辨率让页面在不同分辨率的屏幕下都保持正常的显示效果和比例 - 不同分辨率，显示场景不同，不能固定写死px单位 - 一些图表的自适应方式需要特别处理关于vw和vh - 屏幕视口宽度 = 100vw - 屏幕视口高度 = 100vh - vw和vh也是css中标准的单位，和px,rem, %一样 vw和vh适配方案 - 按照设计稿的尺寸，将`px`按比例计算转为`vw`和`vh` - 转换公式如下 ` 假设设计稿尺寸为1920*1080（做之前一定问清楚UI设计稿的尺寸）即：网页宽度=1920px 网页高度=1080px 我们都知道网页宽度=100vw 网页宽度=100vh 所以，在1920x*1080px的屏幕分辨率下 1920px = 100vw 1080px = 100vh 这样一来，以一个宽300px和200px的div来说，其作所占的宽高，以vw和vh为单位，计算方式如下: vwDiv = (300px / 1920px ) * 100vw vhDiv = (200px / 1080px ) * 100vh 所以，就在1920*1080的屏幕分辨率下，计算出了单个div的宽高当屏幕放大或者缩小时，div还是以vw和vh作为宽高的，就会自动适应不同分辨率的屏幕 ` 但是每次都手动计算时不现实的，所以，我需要封装一个处理函数，让它帮我自动计算这里我用到了scss - 在`src/styles`下新建一个`utils.scss`文件，定义好设计稿的宽度和高度两个变量 - 在这里使用scss内置的`math.div`函数，定义两个`vw`和`vh`的计算函数 - 我们传入具体的像素值，其帮我们自动计算出vw和vh的值 **utils.scss** 我们的大屏的宽高比为4:3； ` //使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div @use "sass:math"; //默认设计稿的宽度 $designWidth:1600; //默认设计稿的高度 $designHeight:1200; //px转为vw的函数 @function vw($px) { @return math.div($px , $designWidth) * 100vw; } //px转为vh的函数 @function vh($px) { @return math.div($px , $designHeight) * 100vh; } ` 使用方式依赖项使用前安装对应版本的node包 - "sass": "^1.26.5", - "sass-loader": "^8.0.2", 路径配置我这里使用的是vue2.6和vue-cli3搭建的vue项目，所以，我只需要在`vue.config.js`里配置一下`utils.scss`的路径,就可以全局使用了 **vue.config.js（只展示了与本方法有关的配置）** ` const path = require('path'); const StyleLintPlugin = require('stylelint-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin'); const defaultSettings = require('./src/settings.js'); function resolve(dir) { return path.join(__dirname, dir); } const name = defaultSettings.title; // page title const port = process.env.port || process.env.npm_config_port || 8066; // dev port const devUrl = process.env.DEV_URL; // dev url module.exports = { publicPath: '/', outputDir: 'dist', assetsDir: 'static', lintOnSave: process.env.NODE_ENV === 'development', productionSourceMap: false, devServer: { port, open: true, overlay: { warnings: false, errors: true, }, proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { target: devUrl, changeOrigin: true, ws: false, }, }, }, configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name, resolve: { alias: { '@': resolve('src'), }, }, performance: { maxEntrypointSize: 400000, maxAssetSize: 250000, }, }, css: { loaderOptions: { //全局配置utils.scss,详细配置参考vue-cli官网 sass: { prependData: '@import "@/styles/utils.scss";', }, less: { javascriptEnabled: true, }, }, }, }; ` **在.vue文件中使用** ` ` ### 特殊的使用情况有的时候可能不仅在`.vue`文件中使用，比如在js中动态创建的DOM元素它可能是直接渲染到html里面的 ``` let oDiv = document.createElement('div') document.body.appendChild(oDiv) ``` 这样的话，我用了以下两种处理方式,来给创建的div设置样式 **1. 定义一些全局的class** 新建一个`global.scss`文件，在main.js中引入 **global.scss** ``` .global-div{ width: vw(300); height: vw(200); background-color: green; } ``` **main.js** ``` import './styles/global.scss' ``` **使用时，给创建的div设置className,** ``` let oDiv = document.createElement('div') oDiv.className = "global-div" ``` **2. 定义js样式处理函数** 这种处理方式和scss处理函数类似，只不过使用了纯js将px转为vw和vh 新建一个`styleUtil.js`文件，内容如下 ``` //定义设计稿的宽高 const designWidth = 1920; const designHeight = 1080; let styleUtil = { // px转vw px2vw: function (_px) { return _px * 100.0 / designWidth + 'vw'; }, // px转vh px2vh: function (_px) { return _px * 100.0 / designHeight + 'vh'; }, }; export default styleUtil; ``` **使用时，单独设置宽高等属性** ``` import styleUtil from "./src/utils/styleUtil.js" let oDiv = document.createElement('div') oDiv.style.width = styleUtil.px2vw(300) oDiv.style.height = styleUtil.px2vh(200) oDiv.style.margin = styleUtil.px2vh(20) ``` 不过这种使用方式有种弊端，就是屏幕尺寸发生变化后，需要手动刷新一下才能完成自适应调整 [该方法参考地址](https://blog.csdn.net/im_dogg/article/details/120156784) ## 方法三：可以使用DataV [DataV具体使用方法可以参考](http://datav.jiaminghi.com/) 大家在使用过程中可以根据项目具体需求来选择哪种方法