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>
相关推荐
云天徽上1 天前
【数据可视化-112】使用PyEcharts绘制TreeMap(矩形树图)完全指南及电商销售数据TreeMap绘制实战
开发语言·python·信息可视化·数据分析·pyecharts
kaomiao20251 天前
空间信息与数字技术和传统GIS专业有何不同?
大数据·信息可视化·数据分析
嘀咕博客1 天前
爱图表:镝数科技推出的智能数据可视化平台
科技·信息可视化·数据分析·ai工具
Elastic 中国社区官方博客2 天前
使用 LangExtract 和 Elasticsearch
大数据·人工智能·elasticsearch·搜索引擎·ai·信息可视化·全文检索
bmcyzs2 天前
【数字展厅】从实体到虚拟:论展厅的数字化转型之路
经验分享·科技·信息可视化·设计规范
云天徽上2 天前
【数据可视化-111】93大阅兵后的军费开支情况———2024年全球军费开支分析:用Python和Pyecharts打造炫酷可视化大屏
开发语言·python·信息可视化·pyecharts
IT毕设梦工厂3 天前
大数据毕业设计选题推荐-基于大数据的国家医用消耗选品采集数据可视化分析系统-Hadoop-Spark-数据可视化-BigData
大数据·hadoop·信息可视化·spark·毕业设计·数据可视化·bigdata
极造数字3 天前
MES系统在不同制造行业中的应用差异与共性
大数据·人工智能·物联网·信息可视化·制造
UWA4 天前
Gears实测室:第一期·音游跨设备性能表现与工具价值实践
信息可视化·性能优化·游戏开发·uwa
阿豪34 天前
2025 年职场转行突围:除实习外,这些硬核证书让你的简历脱颖而出(纯经验分享)
大数据·人工智能·经验分享·科技·信息可视化·产品经理