Echats图表大屏自适应的实现方法
描述
使用图表结合数据可以很直观的视觉效应,大屏展示已经成为企业数据展示的常见场景,如何做到大屏自适应是我们需要解决的一个问题,下面是其中一种解决方案,利用css的transform属性以及设计百分比,如有不足,请批评
实现
1.准备一个容器组件,width = 100vw,height = 100%,作为大屏展示的背景:
<div class="screen-adapter"> </div> .screen-adapter { width: 100vw; min-height: 100%; max-height: 100vh; overflow: hidden; background: #0c1a3c; }
2.根据设计同学提供的设计图可以计算出每部分区域的百分比,例如总尺寸是w*h,其中一个图标宽高是w1 * h1,实现常规切图,此时由1-->2可得:
<div class="screen-adapter"> <div class="content-wrap" :style="style"> <slot></slot> </div> </div> props: { w: { // 设计图尺寸宽 type: Number, default: 1600 }, h: { // 设计图尺寸高 type: Number, default: 900 } }, data () { return { style: { width: this.w + 'px', height: this.h + 'px', transform: 'scale(1) translate(-50%, -50%)' // 默认不缩放,垂直水平居中 } } } .content-wrap { transform-origin: 0 0; position: absolute; top: 50%; left: 50%; }
3.基于第二步,需要根据大屏具体尺寸计算缩放比例,以及设置缩放比例,需要注意的是,绑定resize事件一定别忘了防抖,页面销毁别忘了移除监听事件:
mounted () { this.setScale() this.onresize = this.debounce(() => this.setScale(), 100) window.addEventListener('resize', this.onresize) }, beforeDestroy () { window.removeEventListener('resize', this.onresize) }, methods: { // 防抖 debounce (fn, t) { const delay = t || 500 let timer return function () { const args = arguments if (timer) { clearTimeout(timer) } const context = this timer = setTimeout(() => { timer = null fn.apply(context, args) }, delay) } }, // 获取缩放比例 getScale () { const w = window.innerWidth / this.w const h = window.innerHeight / this.h return w < h ? w : h }, // 设置缩放比例 setScale () { this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)` } }
4.至此,大概结构已经得到,只需要将各部分图标组件还原的设计图放入之前的 插槽即可,各部分图标组件的尺寸按照设计提供的百分比即可,所有代码大致如下:
// ScreenAdapter.vue <template> <div class="screen-adapter"> <div class="content-wrap" :style="style"> <slot></slot> </div> </div> </template> <script> export default { props: { w: { type: Number, default: 1600 }, h: { type: Number, default: 900 } }, data () { return { style: { width: this.w + 'px', height: this.h + 'px', transform: 'scale(1) translate(-50%, -50%)' } } }, mounted () { this.setScale() this.onresize = this.Debounce(() => this.setScale(), 100) window.addEventListener('resize', this.onresize) }, beforeDestroy () { window.removeEventListener('resize', this.onresize) }, methods: { Debounce (fn, t) { const delay = t || 500 let timer return function () { const args = arguments if (timer) { clearTimeout(timer) } const context = this timer = setTimeout(() => { timer = null fn.apply(context, args) }, delay) } }, getScale () { const w = window.innerWidth / this.w const h = window.innerHeight / this.h return w < h ? w : h }, setScale () { this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)` } } } </script> <style> .screen-adapter { width: 100%; min-height: 100vh; max-height: 100vh; overflow: hidden; background: #0c1a3c; } .content-wrap { transform-origin: 0 0; position: absolute; top: 50%; left: 50%; } </style>
项目目录结构如下
效果图如下
可以看出,字体图表都是等比例缩放的
总结
到此这篇关于Echats图表大屏自适应实现的文章就介绍到这了,更多相关Echats图表大屏自适应内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7008393769775005733
相关文章
- 这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10
- 这篇文章主要介绍了C#实现绘制面形图表的方法,对于C#初学者很好的掌握C#图形绘制有一定的借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了从零开始在vue-cli4配置自适应vw布局,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-09
- 这篇文章主要介绍了如何使用RoughViz可视化Vue.js中的草绘图表,帮助大家更好的理解和使用roughViz,感兴趣的朋友可以了解下...2021-01-31
- 众所周知echarts是一个纯JavaScript的图标库,下面这篇文章主要给大家介绍了关于Echarts实例之树形图表的实现方法,需要的朋友可以参考下...2021-08-06
- 本篇文章介绍了C# 绘制统计图大全,其中包括状图, 折线图, 扇形图,有需要的同学可以了解一下。...2020-06-25
- 这篇文章主要介绍了matplotlib 三维图表绘制方法简介,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-09-21
- 本文章来为各位一篇关于echarts使图标能自适应浏览器窗口变化,及经纬度转换的例子,希望文章能够帮助到各位同学哦。 1、echarts使图标能自适应浏览器窗口变化 wind...2016-09-20
- 这篇文章主要介绍了python如何从Oracle读取数据生成图表,帮助大家更好的利用python处理数据,感兴趣的朋友可以了解下...2020-10-14
- 这篇文章主要为大家详细介绍了Vue实现大屏页面的屏幕自适应,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-22
解决echarts图表使用v-show控制图表显示不全的问题
这篇文章主要介绍了解决echarts图表使用v-show控制图表显示不全的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-19- 这篇文章主要介绍了vue完美实现el-table列宽自适应,对vue感兴趣的同学,可以参考下...2021-05-08
总结几种解决子级div应float浮动让父级div高度不能自适应的办法【菜鸟收藏】
现在是我还在菜鸟时遇到的子DIV css float浮动引起的父级div不能自适应高度时,收藏的几个解决办法,希望对新手有所帮助。 解决子级对象使用css float浮动 而父级div...2016-09-14Markdown与Bootstrap相结合实现图片自适应属性
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。 Markdown 是一种轻量级的标记语言,它的优点很多,目前也被越来...2016-05-19- 最近python课程学完了,琢磨着用python点什么东西,经过一番搜索,盯上了QQ空间,本文主要讲述了如何爬取网页版QQ空间,并生成词云图、柱状图、折线图、饼图的各种示例代码...2021-06-02
- 下面小编就为大家分享一篇C# 创建EXCEL图表并保存为图片的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25
- 自适应在开发应用中用到的比较多了我们下面来看一篇关于CSS布局自适应模块等分比例经典例子,希望对各位有用。 CSS等比例划分,在CSS布局中是比较重要的,运行以下代码...2016-09-14
- 下面的内容将分别介绍通过C#来设置Excel中图表背景色、以及图表中的图例背景色的方法,需要的朋友可以参考下...2020-06-25
- 本文主要介绍了Django动态展示Pyecharts图表数据的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-08-23
android开发中 PopupWindow 自适应宽度布局
PopupWindow在android.widget包下,弹出窗口的形式展示。PopupWindow弹出的菜单随内容的宽度自适应,重写ListView的onMeasure()方法是个不错的解决办法。 PopupWind...2016-09-20