脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Echats图表大屏自适应

Echats图表大屏自适应的实现方法

 更新时间：2021年10月24日 14:15:23   作者：弢弢  
很多时候我们需要用图表来制作我们统计的数据直观的分析,所以我们可以用Echarts来制作图表,这篇文章主要给大家介绍了关于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图表大屏自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • js+canvas实现两张图片合并成一张图片的方法

    js+canvas实现两张图片合并成一张图片的方法

    这篇文章主要介绍了js+canvas实现两张图片合并成一张图片的方法,结合实例形式分析了JavaScript结合HTML5 canvas实现图片合并的操作技巧,并附带了Java图片合并的实现方法,需要的朋友可以参考下
    2019-11-11
  • JS结合WebSocket实现实时双向通信

    JS结合WebSocket实现实时双向通信

    WebSocket 是一种在 Web 应用程序中实现实时、双向通信的协议,在本文中,我们将深入介绍 WebSocket 的原理、用法以及一些实际应用场景,x需要的可以参考下
    2023-11-11
  • JS实现页面进入和返回定位到具体位置

    JS实现页面进入和返回定位到具体位置

    其实浏览器也自带了返回的功能，也就是说，自带了返回定位的功能，返回定位到具体位置有两种方法，下面通过场景分析给大家详细讲解，需要的的朋友参考下
    2016-12-12
  • js模拟如何实现重载以及默认参数

    js模拟如何实现重载以及默认参数

    这篇文章主要介绍了js模拟如何实现重载以及默认参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • 浅谈JavaScript中变量和函数声明的提升

    浅谈JavaScript中变量和函数声明的提升

    下面小编就为大家带来一篇浅谈JavaScript中变量和函数声明的提升。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • SlideView 图片滑动(扩展/收缩)展示效果

    SlideView 图片滑动(扩展/收缩)展示效果

    滑动展示效果主要用在图片或信息的滑动展示，也可以设置一下做成简单的口风琴（Accordion）效果。
    2010-08-08
  • 原生js实现针对Dom节点的CRUD操作示例

    原生js实现针对Dom节点的CRUD操作示例

    这篇文章主要介绍了原生js实现针对Dom节点的CRUD操作,结合实例形式分析了javascript操作dom节点的创建、获取、增删改查等相关操作技巧,需要的朋友可以参考下
    2019-08-08
  • JavaScript利用键盘码控制div移动

    JavaScript利用键盘码控制div移动

    这篇文章主要为大家详细介绍了JavaScript利用键盘码控制div移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • js 页面刷新location.reload和location.replace的区别小结

    js 页面刷新location.reload和location.replace的区别小结

    在实际应用的时候，重新刷新页面的时候，我们通常使用： location.reload() 或者是 history.go(0) 来做。下面有一些相关的内容，大家看完了就会有更多的收获。
    2009-12-12
  • JS数字抽奖游戏实现方法

    JS数字抽奖游戏实现方法

    这篇文章主要介绍了JS数字抽奖游戏实现方法,可实现按下回车键出现随机数字切换的效果,涉及时间与随机数的相关操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05

最新评论