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-Jquery简介 入门了解篇
Nov 25 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
TypeScript 中接口详解
Jun 19 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
react+antd 递归实现树状目录操作
Nov 02 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
无线电广播的开始
2002/01/30 无线电
广播爱好者需要了解的天线知识
2021/03/01 无线电
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
jQuery跨域问题解决方案
2015/08/03 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
深入理解Vue 的钩子函数
2018/09/05 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
Python求解任意闭区间的所有素数
2018/06/10 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
详解python运行三种方式
2019/05/13 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
python redis存入字典序列化存储教程
2020/07/16 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
机械设计专业应届生求职信
2013/11/21 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
荆州古城导游词
2015/02/06 职场文书
齐云山导游词
2015/02/06 职场文书
同学毕业留言寄语
2015/02/27 职场文书
工作自我推荐信范文
2015/03/25 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
Python matplotlib多个子图绘制整合
2022/04/13 Python