我只想说每个人遇到的bug真的不能一概而论，解决办法也会有不同。在vue中使用echarts的时候，会想要实现window.resize窗体变化大小的时候让图形大小跟着变化。实现的过程中各种bug，也真的让人有种想要发狂的感觉。但是还好，最后在不断的查资料和尝试当中。实现了想要的效果，仅供参考：

首先我这里实现的效果是切换echart图形，然后在window.resize过程中想要实现自适应窗口大小的变化。

这里的两个button分别是控制两个路由切换，也就是两个echart图形（柱状图和饼图）

首先实现这两个图形的option设置这里就不进行展示了,在官网上有许多的例子，可供参考。

（1）图形的container<div id='echart'></div>  我把宽高设置为充满父容器。所以你需要确保你的图形容器在切换的时候要有宽高。在我的另外一篇随笔中有写到利用js实现echarts切换的时候，会涉及到当echarts的display为none的时候，再次显示之前，需要去计算并赋值给图形容器，不然图形没有宽度或者高度会导致无法展示。

（2）

在methods方法中写了一个实现柱状图的过程方法：createBar。

在挂载的时候去调用该方法，就实现了基本的图形。但是这个时候还没有涉及到当window  resize的时候，图形的大小不会跟随改变。这个时候就需要监听window.resize变化：

完整的mounted阶段。这里面使用到了jquery，需要引入jquery。具体的可以全局<script>引入，也可以把jquery当做插件进行引入<需要在webpack中配置>，网络上有许多配置的例子。

到这里就可以完成window.resize的监听并且图形可以 变化了。

或许这个方法不太优，但是不失为一种方式。如果大家有更好的实现方法当然也可以进行分享。分享使你快乐。哈哈~~

vue中监听window.resize的变化的更多相关文章

  1. vue中监听路由参数的变化

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...

  2. 在vue中监听storage的变化

    1.首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,然后创建一个StorageEv ...

  3. vue中监听路由参数变化

    今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面  /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 , 但从“/aaa?id=1”到“ ...

  4. vue中监听数据变化 watch

    今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...

  5. VueJs 监听 window.resize 方法

    Vuejs 本身就是一个 MVVM 的框架. 但是在监听 window 上的 事件 时,往往会显得 力不从心. 比如 这次是 window.resize 恩,我做之前也是百度了一下.看到大家伙都为这个 ...

  6. vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize'，fn) ，window.onresize无效的处理方式

    // 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...

  7. vue中监听页面滚动和监听某元素滚动

    ①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...

  8. vue中监听返回键

    问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿 解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpop ...

  9. 如何在vue中监听scroll，从而实现滑动加载更多

    首先需要明确3个定义: 文档高度:整个页面的高度 可视窗口高度:你看到的浏览器可视屏幕高度 滚动条滚动高度: 滚动条下滑过的高度 当 文档高度 = 可视窗口高度 + 滚动条高度  时,滚动条正好到底. ...

随机推荐

  1. Stack&&Queue

    特殊的容器:容器适配器 stack     queue     priority_queue:vector+堆算法---->优先级队列 stack:     1.栈的概念:特殊的线性结构,只允许 ...

  2. 【并发】1、关于线程的几种状态&关于yield的理解

    最近在看disruptor源码,在获取ringbuffer的下一个序列的时候,disruptor有几种等待策略,其中有YieldingWaitStrategy类,是使用java的Thread.yiel ...

  3. vue教程2-05 v-for循环 重复数据无法添加问题 加track-by='索引'

    vue教程2-05 v-for循环 重复数据无法添加问题  加track-by='索引' 解决问题的代码示例: <!DOCTYPE html> <html lang="en ...

  4. 课程一(Neural Networks and Deep Learning)，第二周（Basics of Neural Network programming）—— 4、Logistic Regression with a Neural Network mindset

    Logistic Regression with a Neural Network mindset Welcome to the first (required) programming exerci ...

  5. Java模式—简单工厂模式

    简单工厂模式:是由一个工厂对象决定创建出哪一种产品类的实例,简单工厂模式是工厂模式家族中最简单实用的模式. 目的:为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来,达到提高灵活性的目的. ...

  6. Chapter 3 Phenomenon——21

    "Nobody will believe that, you know." “你知道吗没有人会相信会是这样的” His voice held an edge of derision ...

  7. Linq 多表连接查询join

    在查询语言中,通常需要使用联接操作.在 LINQ 中,可以通过 join 子句实现联接操作.join 子句可以将来自不同源序列,并且在对象模型中没有直接关系(数据库表之间没有关系)的元素相关联,唯一的 ...

  8. Tomcat学习总结（1）——Tomcat入门教程

    一.打包JavaWeb应用 在Java中,使用"jar"命令来对将JavaWeb应用打包成一个War包,jar命令的用法如下: 范例:将JavaWebDemoProject这个Ja ...

  9. 通过HttpServletRequest获取服务器路径

    String scheme = request.getScheme(); String serverName = request.getServerName(); int port = request ...

  10. 【IT笔试面试题整理】字符串的排列

    [试题描述]输入一个字符串,打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab,cba. 分析:这是一道很好的考查对 ...