Vue检测屏幕变化来改变不同的charts样式实例

 更新时间:2020年10月26日 09:15:49   作者:GllWyz  
这篇文章主要介绍了Vue检测屏幕变化来改变不同的charts样式实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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样式实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实践---根据不同环境,自动转换请求的url地址操作

    vue实践---根据不同环境,自动转换请求的url地址操作

    这篇文章主要介绍了vue实践---根据不同环境,自动转换请求的url地址操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 使用vue-cli3+typescript的项目模板创建工程的教程

    使用vue-cli3+typescript的项目模板创建工程的教程

    这篇文章主要介绍了使用vue-cli3+typescript的项目模板创建工程,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • Vue手写防抖和节流函数代码详解

    Vue手写防抖和节流函数代码详解

    在Vue中函数的防抖和节流不是什么新鲜话题,这篇文章主要给大家介绍了关于Vue3中防抖/节流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • Vue.js表单控件实践

    Vue.js表单控件实践

    这篇文章主要为大家详细介绍了Vue.js表单控件实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Vue中组件递归及使用问题

    Vue中组件递归及使用问题

    这篇文章主要介绍了Vue中组件的递归和使用问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • 关于vue路由监听事件跳转的问题

    关于vue路由监听事件跳转的问题

    这篇文章主要介绍了关于vue路由监听事件跳转的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 用Vue编写抽象组件的方法

    用Vue编写抽象组件的方法

    这篇文章主要介绍了用Vue编写抽象组件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue3输入无效路由跳转到指定error页面问题

    vue3输入无效路由跳转到指定error页面问题

    这篇文章主要介绍了vue3输入无效路由跳转到指定error页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 详解vue如何封装封装一个上传多张图片的组件

    详解vue如何封装封装一个上传多张图片的组件

    上传图片不管是后台还是前端小程序,上传图片都是一个比不可少的功能有时候需要好几个页面都要上传图片,每个页面都写一个非常不方便,本文就给大家介绍vue如何封装一个上传多张图片的组件,需要的朋友可以参考下
    2023-07-07
  • 一篇文章教会你部署vue项目到docker

    一篇文章教会你部署vue项目到docker

    在前端开发中,部署项目是我们经常发生的事情,下面这篇文章主要给大家介绍了关于部署vue项目到docker的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04

最新评论