Vue大屏自适应终极解决方案

v-scale-screen
v-scale-screen是一个大屏自适应组件,在实际业务中,我们常用图表来做数据统计,数据展示,数据可视化等比较直观的方式来达到一目了然的数据查看,但在大屏开发过程中,常会因为适配不同屏幕而感到困扰,下面我们使用v-scale-screen来解决一下这个难题。

效果

废话不多说,先上图

可以看到,我们通过等比例缩放的方式,实现了自适应,同时我们也为此发布了vue组件v-scale-screen

组件

v-scale-screen使用css属性transform实现缩放效果,进行等比例计算,达到等比例缩放的效果,同时我们也支持铺满全屏,宽度等比,高度等比,等自适应方案

使用

  1. 安装依赖

注:vue2请使用v-scale-screen@1.0.0版本,vue3请使用v-scale-screen@2.0.0版本

复制代码
npm install v-scale-screen -save
# or
yarn add v-scale-screen
  1. 在main.js中引入

vue2中使用插件导入,vue3以组件导入

vue2

复制代码
// main.js
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)

vue3

复制代码
<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>
<script>
import VScaleScreen from 'v-scale-screen'
export default {
  components:{
    VScaleScreen
  }
}
</script>
  1. 在组件中使用

    <v-scale-screen width="1920" height="1080">
    <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart>
    </v-scale-screen>
相关推荐
DataGear5 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
程序员阿超的博客10 小时前
Python 数据分析与机器学习入门 (五):Matplotlib 数据可视化基础
python·信息可视化·数据分析·matplotlib·数据可视化·python教程·pyplot
葡萄城技术团队10 天前
SpreadJS 迷你图:数据趋势可视化的利器
信息可视化
蓝婷儿10 天前
Python 数据分析与可视化 Day 5 - 数据可视化入门(Matplotlib & Seaborn)
python·信息可视化·数据分析
想看雪的瓜11 天前
Origin绘制三Y轴柱状图、点线图、柱状点线图
信息可视化
深空数字孪生11 天前
金融行业B端系统布局实战:风险管控与数据可视化的定制方案
信息可视化·金融·数据分析
isNotNullX11 天前
ETL连接器好用吗?如何实现ETL连接?
大数据·数据库·数据仓库·信息可视化·etl
@十八子德月生12 天前
第十章——8天Python从入门到精通【itheima】-99~101-Python基础综合案例-数据可视化(案例介绍=JSON格式+pyecharts简介)
大数据·python·信息可视化·pycharm·echarts·数据可视化
棱镜研途13 天前
思辨场域丨AR技术如何重塑未来学术会议体验?
人工智能·计算机视觉·信息可视化·ar·虚拟现实
搏博13 天前
基于Python、tkinter、sqlite3 和matplotlib的校园书店管理系统
python·信息可视化·sqlite·matplotlib