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>
相关推荐
计算机编程小央姐3 天前
跟上大数据时代步伐:食物营养数据可视化分析系统技术前沿解析
大数据·hadoop·信息可视化·spark·django·课程设计·食物
CodeCraft Studio3 天前
【案例分享】TeeChart 助力 Softdrill 提升油气钻井数据可视化能力
信息可视化·数据可视化·teechart·油气钻井·石油勘探数据·测井数据
招风的黑耳3 天前
赋能高效设计:12套中后台管理信息系统通用原型框架
信息可视化·axure后台模板·原型模板
程思扬3 天前
利用JSONCrack与cpolar提升数据可视化及跨团队协作效率
网络·人工智能·经验分享·docker·信息可视化·容器·架构
路人与大师3 天前
【Mermaid.js】从入门到精通:完美处理节点中的空格、括号和特殊字符
开发语言·javascript·信息可视化
云天徽上4 天前
【数据可视化-112】使用PyEcharts绘制TreeMap(矩形树图)完全指南及电商销售数据TreeMap绘制实战
开发语言·python·信息可视化·数据分析·pyecharts
kaomiao20254 天前
空间信息与数字技术和传统GIS专业有何不同?
大数据·信息可视化·数据分析
嘀咕博客4 天前
爱图表:镝数科技推出的智能数据可视化平台
科技·信息可视化·数据分析·ai工具
Elastic 中国社区官方博客5 天前
使用 LangExtract 和 Elasticsearch
大数据·人工智能·elasticsearch·搜索引擎·ai·信息可视化·全文检索
bmcyzs5 天前
【数字展厅】从实体到虚拟:论展厅的数字化转型之路
经验分享·科技·信息可视化·设计规范