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 eval函数深入认识
Feb 21 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
javascript实现密码强度显示
Mar 18 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
Javascript执行流程细节原理解析
May 14 Javascript
Vue前端判断数据对象是否为空的实例
Sep 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
php的XML文件解释类应用实例
2014/09/22 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
高山背包:High Sierra
2017/11/23 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
西式婚礼证婚词
2014/01/12 职场文书
宿舍卫生检讨书
2014/01/16 职场文书
借款协议书范本
2014/04/22 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
交通事故协议书范本
2014/11/18 职场文书
污水处理保证书
2015/05/09 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python