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 不能释放内存.
Sep 07 Javascript
Javascript Select操作大集合
May 26 Javascript
第一个JavaScript入门基础 document.write输出
Feb 22 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
Openlayers绘制地图标注
Sep 28 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系列学习之日期函数使用介绍
2012/08/18 PHP
js 中 document.createEvent的用法
2010/08/29 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
python和php学习哪个更有发展
2020/06/17 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
法学专业自我鉴定
2014/02/05 职场文书
出国留学经济担保书
2014/04/01 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
社区服务活动小结
2014/07/08 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL