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图表大屏自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

canvas雪花效果核心代码分享
本文主要分享了canvas实现雪花效果的核心代码，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
weakMap为什么是弱引用原理
这篇文章主要为大家介绍了weakMap为什么是弱引用原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
javascript实现显示和隐藏div方法汇总
本文章通过几个简单的实例告诉你如何来实例关于隐藏与显示div层及关闭层与隐藏的区别分析哦，有需要的同学可以参考一下本文章。
2015-08-08
JavaScript表单验证实现代码
这篇文章主要为大家详细介绍了JavaScript表单验证的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
javascript匀速动画和缓冲动画详解
这篇文章主要为大家详细介绍了javascript匀速动画和缓冲动画,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
JS 修改URL参数(实现代码)
本篇文章是对JS修改URL参数的实现代码进行了详细的分析介绍，需要的朋友参考下
2013-07-07
JavaScript与Image加载事件(onload)、加载状态(complete)
以前写过一个图片等比缩放的Js函数，缺陷是要等到所有图片都加载完毕了，才能进行等比缩放。
2011-02-02
微信小程序签到功能
这篇文章主要为大家详细介绍了微信小程序签到功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-10-10
Bootstrap源码解读网格系统（3）
这篇文章主要源码解读了Bootstrap网格系统，介绍了Bootstrap网格系统的工作原理具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
深入理解JavaScript 参数按值传递
本篇文章主要介绍了深入理解JavaScript 参数按值传递，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05