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 相关文章推荐
js控制框架刷新
Aug 01 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
JSON 数据格式详解
Sep 13 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
微信小程序实现转盘抽奖
Sep 21 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开发文件系统实例讲解
2006/10/09 PHP
php扩展ZF――Validate扩展
2008/01/10 PHP
php 问卷调查结果统计
2015/10/08 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
JS表的模拟方法
2015/02/05 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
对python调用RPC接口的实例详解
2019/01/03 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
举例说明类变量和实例变量的区别
2016/06/30 面试题
介绍一下Java中的static关键字
2012/05/12 面试题
节水口号标语
2014/06/19 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
客服专员岗位职责
2015/02/10 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
tree shaking对打包体积优化及作用
2022/07/07 Java/Android