本文收集了网上常见的大屏适配方案,仅供参考。
方法1: 使用插件: vue2 请使用v-scale-screen@1.0.0版本
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)
<v-scale-screen width="1920" height="1080">
<div>
<v-chart>....</v-chart>
<v-chart>....</v-chart>
<v-chart>....</v-chart>
<v-chart>....</v-chart>
<v-chart>....</v-chart>
</div>
</v-scale-screen>
方法2: 利用scale函数
export default {
mounted() {
//初始化自适应
this.handleScreenAuto()
//绑定自适应函数 ---防止浏览器栏变化后不再适配
window.onresize = () => this.handleScreenAuto()
},
destroyed() {
window.onresize = null
},
methods: {
//数据大屏自适应函数
handleScreenAuto() {
const designDraftWidth = 1920 //设计稿的宽度
const designDraftHeight = 1080 //设计稿的高度
//根据屏幕的变化适配的比例
const scale =
document.documentElement.clientWidth / document.documentElement.clientHeight <
designDraftWidth / designDraftHeight
? document.documentElement.clientWidth / designDraftWidth
: document.documentElement.clientHeight / designDraftHeight
//缩放比例
document.querySelector(
'#screen'
).style.transform = `scale(${scale}) translate(-50%)`
},
},
}
// id=screen中放大屏展示内容, 可以通过mixins混入引入
方法3: flexiable + rem
-
https://github.com/amfe/lib-flexible/blob/2.0/index.js 下载 flexible.js 文件
var rem = docEl.clientWidth / 10 // rem值 = px值*10/设计图宽度
-
安装插件
px2rem插件
, 并配置,假设设计稿的尺寸为 1980, 则配置 rem = 198px -
echarts 图表自适应
- echarts 默认使用的 px 为单位,且不能在 echarts 配置中携带 rem 单位,怎么办?— 添加函数
function fontSize(res, defaultWidth = 3840) { let docEl = document.documentElement, clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth if (!clientWidth) return // 此处的3840 为设计稿的宽度,记得修改! let fontSize = clientWidth / defaultWidth return res * fontSize } // 使用,在需要的位置用函数包裹即可 fontSize: fontSize(30)
- 监听屏幕尺寸变化,及时重绘图表
window.addEventListener('resize', function () { chart.resize() }) // chart 为注册绑定的echarts对象
方法4: 使用DataV的全屏容器 + flex + 百分比布局
<dv-full-screen-container>content</dv-full-screen-container>
-
建议在全屏容器内使用百分比搭配 flex 进行布局,以便于在不同的分辨率下得到较为一致的展示效果。
-
使用前请注意将 body 的 margin 设为 0,否则会引起计算误差,全屏后不能完全充满屏幕。
方法5: vw + vh
- 创建极端 vw 和 vh 的样式函数
// utils.scss // 使用scss的math函数,https://sass-lang.com/documentation/breaking-changes/slash-div @use 'sass:math'; //默认设计稿的宽度 $designWidth: 1920; //默认设计稿的高度 $designHeight: 1080; //px转为vw的函数 @function vw($px) { @return math.div($px, $designWidth) * 100vw; } //px转为vh的函数 @function vh($px) { @return math.div($px, $designHeight) * 100vh; // math.div(x, y) = x / y }
- 在 vue.config.js 中进行全局注册
css: {
loaderOptions: {
//全局配置utils.scss,详细配置参考vue-cli官网
sass: {
additionalData: `@import "@/assets/styles/utils.scss";`, // 注意:在 sass-loader v8 中,这个选项名是 "prependData"
},
},
},
- 在 xx.vue 中使用
chart-wrapper {
width: vw(300); // 300 / 1980
height: vh(200);
font-size: vh(16); // 16 / 1080
background-color: black;
}
关于echart中字体大小–适配屏幕尺寸
<template>
<div class="linechart" ref="line"></div>
</template>
<script>
import adaptFontSize from '@/utils/fontSIze'
export default {
name: 'linechart',
mixins: [adaptFontSize],
mounted() {
this.initChart()
this.adapterChart()
window.addEventListener('resize', () => { // 屏幕尺寸变化时,重新渲染
this.adapterChart()
})
},
beforeDestoryed() {
// 组件销毁前移除监听,防止内存泄露
window.removeEventListener('resize')
},
methods: {
// 字体大小适配代码!!!
transfomrFontSize(val) {
let clientWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth
if (!clientWidth) return
let radio = clientWidth / 1920
return radio * val
},
},
initChart() {
/*大屏*/
this.myChart = this.$echarts.init(this.$refs.line)
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
},
},
grid: {
left: '0%',
right: '10%',
top: '15%',
bottom: '5%',
containLabel: true,
},
xAxis: {
type: 'category',
data: this.xData,
name: this.xName,
},
textStyle: {
//图例文字的样式
color: 'red',
},
yAxis: {
name: this.yName,
nameLocation: 'end',
nameTextStyle: {
color: 'white',
},
textStyle: {
color: 'white',
},
type: 'value',
axisLine: { show: true },
splitLine: { show: true, lineStyle: { type: 'dashed' } },
},
series: [
{
type: this.type,
label: {
normal: {
show: true,
formatter: '{b}',
},
},
data: this.yData,
},
],
}
option && this.myChart.setOption(option)
},
adapterChart() {
let option = {
textStyle: {
fontSize: this.transfomrFontSize(20),
},
}
this.myChart.setOption(option)
this.myChart.resize() // 必须调用自身的resize方法!!!!!
},
},
}
</script>
- 如果大屏中用到的都是需要自适应的图表,建议使用mixins混入处理,注意混入规则。
混入规则:
- data: mixins 中的 data 会合并到 data 中,有冲突的话,data 中数据覆盖 mixins 中的数据。
- 钩子函数:合并执行,先执行 mixins 中的钩子函数。
- methods、components 和 directives: 有冲突时,组件内会覆盖 mixins 中的 。