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>
相关推荐
UI罐头25 分钟前
如何选择数据可视化工具?从设计效率到图表表现力全解读
信息可视化·数据分析·数据工具
Favor_Yang19 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
❀͜͡傀儡师21 小时前
GoView 低代码数据可视化
信息可视化·go-view
LabEx1 天前
科研数据可视化核心技术:基于 AI 与 R 语言的热图、火山图及网络图绘制实践指南
人工智能·信息可视化·r语言·r语言绘图·乐备实·labex·科研数据绘图
2301_764441332 天前
Python管理咨询数据可视化实战:收入分布与顾问利用率双轴对比图表生成脚本
开发语言·python·信息可视化
杨超越luckly2 天前
HTML应用指南:利用GET请求获取全国山姆门店位置信息
信息可视化·数据分析·html·argis·门店
晨曦5432103 天前
数据可视化中常用的图表类型 及其适用场景,涵盖基础到高级,帮助你根据数据类型和展示目标选择合适的图表:
信息可视化
小白学大数据3 天前
R语言爬虫实战:如何爬取分页链接并批量保存
开发语言·爬虫·信息可视化·r语言
kaikaile19953 天前
使用Python进行数据可视化的初学者指南
开发语言·python·信息可视化
数据饕餮6 天前
Python数据分析基础03:探索性数据分析
python·信息可视化·数据分析