脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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图表大屏自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • 小程序云开发实战小结

    小程序云开发实战小结

    这篇文章主要介绍了小程序云开发实战小结，本文详细的介绍了云开发以及环境的搭建和项目实践，非常具有实用价值，需要的朋友可以参考下
    2018-10-10
  • JavaScript实现计数器基础方法

    JavaScript实现计数器基础方法

    这篇文章主要为大家详细介绍了JavaScript实现计数器的基础方法
    ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 回车直接实现点击某按钮的效果即触发单击事件

    回车直接实现点击某按钮的效果即触发单击事件

    这篇文章主要介绍了回车直接实现点击某按钮的效果即触发单击事件,需要的朋友可以参考下
    2014-02-02
  • JavaScript中高级语法??表达式用法示例详解

    JavaScript中高级语法??表达式用法示例详解

    这篇文章主要为大家介绍了JavaScript中高级语法??表达式用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • Bootstrap基本样式学习笔记之按钮(4)

    Bootstrap基本样式学习笔记之按钮(4)

    篇文章主要介绍了Bootstrap学习笔记之按钮基本样式的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript中自带的 reduce()方法使用示例详解

    JavaScript中自带的 reduce()方法使用示例详解

    下文小编给大家带来了js中自带的reduce()方法使用示例详解，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-08-08
  • JavaScript中链式调用之研习

    JavaScript中链式调用之研习

    方法链一般适合对一个对象进行连续操作(集中在一句代码)。一定程度上可以减少代码量，缺点是它占用了函数的返回值。
    2011-04-04
  • 使用Webpack打包的流程分析

    使用Webpack打包的流程分析

    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源，这篇文章主要介绍了使用Webpack打包的操作方法,需要的朋友可以参考下
    2022-12-12
  • input框中自动展示当前日期yyyy/mm/dd的实现方法

    input框中自动展示当前日期yyyy/mm/dd的实现方法

    下面小编就为大家带来一篇input框中自动展示当前日期yyyy/mm/dd的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 转换layUI的数据表格中的日期格式方法

    转换layUI的数据表格中的日期格式方法

    今天小编就为大家分享一篇转换layUI的数据表格中的日期格式方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论