Vue检测屏幕变化来改变不同的charts样式实例


Posted in Javascript onOctober 26, 2020

css中我们经常会通过媒体查询就可以完成对不同的屏幕展现不同的样式

在js中我们也可以通过检测屏幕的变化来展现不同的样式

在我的实例中:因为第一次打开也不知道到底是应该展示哪一个屏幕,所以会进行先判断一次,之后用addEventListener来是实现功能,暂时是通过这种方式实现的,以后有更好的方法再更新。。。

mounted() {
  this.checkScreen()
 },
methods: {
 // 屏幕检测变化
  checkScreen() {
   var _this = this
   if (document.body.clientWidth > 500) {
     _this.echartsOne()
   } else {
     _this.echartsTwoPhone()
   }
   window.addEventListener('resize', () => {
     if (document.body.clientWidth < 500) {
      _this.echartsTwoPhone()
     } else {
      _this.echartsOne()
     }
   })
  }
}

补充知识:vue中处理echarts因v-if切换后图形显示异常+实现echarts监听窗口变化而改变大小

一、处理echarts因v-if切换后图形显示异常

有时候我们需要在一个页面中使用v-if来显示不同的两个图表。

视觉效果上好像是从一个页面点击链接跳转到另一个页面,但其实原理是通过销毁和重建两个不同dom容器来实现这个效果。

可能会出现的问题:

在切换到另一个图表显示的时候,改变了窗口宽度高度,那么点击返回按钮时看到原先的echarts图形就会有一部分消失显示不完整了。

解决办法:

我们需要在返回这个按钮上加个定时器延迟,来主动触发窗口发生变化(前提是代码也有做监听窗口变化改变图形大小的操作,下面标题二会讲解)。这样图形能正确自动渲染变化一次。

methods: {
 // 关闭监控ip执行详情页
  closePerfExe () {   
   this.isShowPerfExe = false // 控制当前dom容器的显示
   // 当在监控ip详情页点击回性能分析页的时候,加个延迟主动触发窗口变化,这样窗口改变性能分析页就不会发生图表显示不完整的情况了
   // 这里的代码是关键!!!
   setTimeout( () => {
    let triggerResize = new Event('resize')
    window.dispatchEvent(triggerResize)
   },0)
  }
}

二、vue实现echarts监听窗口变化而改变大小

监听窗口的变化,echarts图形大小跟着变化。

注意:在组件销毁时记得也要移除监听。

data () {
 return {
 myChartPerformance: '', // echarts的dom容器
 performanceOption: '' // echarts配置项option
 } 
 },
 mounted () {
  // 一般我为了防止出现一些切换问题,都是先清除echarts再初始化
    if(this.myChartPerformance){
     this.myChartPerformance.clear()
    }
    this.myChartPerformance = echarts.init(document.getElementById('myChartPerformance'))

  // 图表数据配置
    this.performanceOption = {
    title: {
     text: chartOptions.titleName
    },
    tooltip: {
     trigger: 'axis'
    },
    //.........
    //.........
   }
   // 设置图表数据配置
   this.myChartPerformance.setOption(this.performanceOption)
  // 监听窗口大小改变图表大小(先移除再监听,防止出错)
   window.removeEventListener('resize', this.resizePerformanceFun)
   window.addEventListener('resize', this.resizePerformanceFun)
 },
 beforeDestroy () {
  // 组件销毁前移除监听
 window.removeEventListener('resize', this.resizePerformanceFun)
 },
 methods : {
 resizePerformanceFun () {
    if(this.myChartPerformance){
    // console.log('窗口改变了,重新渲染图形')
    this.myChartPerformance.resize()
   }
  }
}

以上这篇Vue检测屏幕变化来改变不同的charts样式实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 图片轮换效果
Jul 29 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
JS动画定时器知识总结
Mar 23 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
微信小程序的引导页实现代码
Jun 24 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 #Javascript
vue下载二进制流图片操作
Oct 26 #Javascript
JavaScript如何操作css
Oct 24 #Javascript
javascript实现多边形碰撞检测
Oct 24 #Javascript
解决vue scoped html样式无效的问题
Oct 24 #Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 #Javascript
Ant Design的Table组件去除
Oct 24 #Javascript
You might like
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
Vue 组件间的样式冲突污染
2017/08/31 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
python文件和目录操作函数小结
2014/07/11 Python
python对url格式解析的方法
2015/05/13 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
Pygame框架实现飞机大战
2020/08/07 Python
python各种excel写入方式的速度对比
2020/11/10 Python
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
查环查孕证明
2014/01/10 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
小学教师读书活动总结
2014/07/08 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
亮剑观后感300字
2015/06/05 职场文书