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 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
jquery中this的使用说明
Sep 06 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 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
php常用Stream函数集介绍
2013/06/24 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
python实现给数组按片赋值的方法
2015/07/28 Python
Python 自动化表单提交实例代码
2017/06/08 Python
python主线程捕获子线程的方法
2018/06/17 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
Python实现验证码识别
2020/06/15 Python
Django自带的用户验证系统实现
2020/12/18 Python
法人代表委托书
2014/04/04 职场文书
建筑节能汇报材料
2014/08/22 职场文书
暑期培训心得体会
2014/09/02 职场文书
大学生实训报告总结
2014/11/05 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
合作合同协议书
2016/03/21 职场文书
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技