vue项目中对于echarts图表随着浏览器窗口resize的处理

柔情只为你懂 2022-01-12 03:05 424阅读 0赞

说明： 有时候项目中会显示一些图表，而且width可能并不是固定的（可能100%），那么当浏览器窗口变化的时候，图表的大小应该跟随着变大或变小，称之为resize

/**
     * 用来处理每一个有图表的页面添加resize , 离开时移除resize函数
     */
    import echarts from 'echarts'
    import _ from 'lodash'
    export default {
      data () {
        return {
          doms: []
        }
      },
      computed: {
        chartResize () {
          return _.throttle(() => {
            return this.doms.forEach(dom => {
              dom && dom.resize()
            })
          }, 400)
        }
      },
      methods: {
        initChart () {
          this.doms.forEach(dom => {
            dom && echarts.init(dom)
          })
        }
      },
      mounted () {
        console.log('mixins mounted')
        this.doms = [this.$refs['charts']]
        this.initChart()
        window.addEventListener('resize', this.chartResize)
      },
      destroyed () {
        console.log('mixins destroyed')
        window.removeEventListener('resize', this.chartResize)
      }
    }
    
    复制代码

ps: 使用的时候在需要图表的页面引入这个mixins

转载于:https://juejin.im/post/5d078b12e51d4510624f97d0

发表评论取消回复

表情：

评论列表（有 0 条评论，424人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue-图表resize事件

有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器resize的时候我们希望图表也进行resize，因此我们会在父容器组件中写： mounted() {

约定不等于承诺〃/ 2023年07月20日 15:59/ 0 赞/ 581 阅读

相关在vue中使用Echarts图表工具

一、第一步，下载`Echarts`，通过`npm install echarts --save` 或者是 `cnpm install echarts --save` 命令进行下

曾经终败给现在/ 2023年06月25日 10:18/ 0 赞/ 49 阅读

相关 VUE + ECharts实现图表

因为这里演示了多种图表，使用的 echarts 引入方式是引入的所有组件，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。 1.安装echar

亦凉/ 2022年11月07日 14:34/ 0 赞/ 251 阅读

相关 Vue项目中ECharts图表不显示问题

相关文章： [ECharts官网][ECharts] [在Vue项目中使用ECharts][Vue_ECharts] -------------------- 最近在工

- 日理万妓/ 2022年10月12日 01:01/ 0 赞/ 653 阅读

相关 vue页面中多个echarts图表随窗口缩放变化

不知道大家是否遇见过 window.onresize 在实现 vue 中使用两个及以上 echarts 图表时只有最后一个图表会跟随窗口大小变化或者所有图表大小都不会变化的情况

叁歲伎倆/ 2022年09月05日 01:49/ 0 赞/ 332 阅读

相关 Vue中使用echarts图表

一、安装引入echarts插件安装 npm install echarts -S 在main.js中配置引入 // 引入echarts i

水深无声/ 2022年05月19日 04:08/ 0 赞/ 283 阅读

相关【Vue】21.vue项目中ECharts图表双Y轴

安装ECharts图表插件 npm install echarts --save 实例效果： ![watermark_type_ZmFuZ3poZW5naGVpd

╰半夏微凉°/ 2022年04月24日 15:24/ 0 赞/ 469 阅读

相关 echarts 图表随窗口变化而变化

很多情况下，使用echarts进行统计图制作时需要做自适应效果，能够随着窗口的大小而变化大小。但是统计图比例并没有随窗口大小改变而自动调整到最佳视觉效果，如 ![file-r

我不是女神ヾ/ 2022年03月31日 14:56/ 0 赞/ 677 阅读

相关【Vue】20.vue项目中引入echarts图表遇到的问题

最近做一个公众号有需求是要添加一个图表，自己调查了一下，决定使用ECharts，在vue项目中引入ECharts，由于第一次做图表，还要跟UI设计图保持一致，也是遇到了好多样式

淡淡的烟草味﹌/ 2022年02月14日 18:39/ 0 赞/ 600 阅读

相关 vue项目中对于echarts图表随着浏览器窗口resize的处理

说明：有时候项目中会显示一些图表，而且width可能并不是固定的（可能100%），那么当浏览器窗口变化的时候，图表的大小应该跟随着变大或变小，称之为resize /

柔情只为你懂/ 2022年01月12日 03:05/ 0 赞/ 425 阅读