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

赞 (0)

相关推荐

  • vue中选中多个选项并且改变选中的样式的实例代码

    1:HTML: <ul class="content"> <li v-for="(item,index) in touristList" @click="onStorage(item,index)" :class="{'active': rSelect.indexOf(item)!=-1}" :key="item.id"> <div>{{item.name}}</d

  • Vue全局使用less样式,组件使用全局样式文件中定义的变量操作

    当你想要在vue项目的一个组件中使用全局样式文件中定义好的变量,此时只在main.js中import是不行的. 目录结构如下: 即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量. 此时,只用import在main.js中导入variables.less文件是会报错的. 解决办法: 1.安装less和less-loader npm i less less-loader -D 2.要想全局使用还需使用一个插件( sass-resources-l

  • vue 公共列表选择组件,引用Vant-UI的样式方式

    此组件用于公共选择组件.引用Vant UI 作为样式 特性: 1.支持动态.静态数据源. 2.支持分页加载. 3.支持模糊搜索. 4.支持单选.多选. 组件源码: <template> <div class="gn-PubSelect"> <van-action-sheet v-model="inShow"> <div class="gn-PubSelect-main" :style="{'he

  • vue修改Element的el-table样式的4种方法

    修改Element中的el-table样式,可以使用以下几种方法: 1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style. 2. cell-style 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style. 3. header-row-style 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style. 4. header-c

  • 解决vue scoped html样式无效的问题

    1.问题场景 page1,page2都使用flexible移动端自适应的时候,有一个页面page2需要手动设置rem基准值, //手动设置基准 html{ font-size: 120px !important; } 但是在page2引用的self.less里面设置了基准,竟然没有生效 2.问题分析scoped属性 在引用self.less的时候,使用了属性scoped vue中引入了scoped这个概念,设计思想就是让当前组件的样式不会修改到其他页面的样式,使用了data-v-hash的方式来

  • vue-cli —— 如何局部修改Element样式

    最近在做vue项目时用到了Element,发现这玩意儿用起来很舒服,很新颖,上手也很快,而且效果足够酷炫.但是后面发现一个很大的问题,那就是Element的样式有限,这极大地限制了项目的应用广度,所以我们有必要对Element内部的CSS进行一定的覆盖,来改变其样式.在修改Element样式时,遇到了一些问题,这里简单做一些记录,便于以后查阅. 我在用el-switch做开关切换时,使用默认样式: 代码如下: 效果: 现在我想把蓝色字体改为其他颜色,但是我发现无论我如何修改样式,界面始终没有任何

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

    css中我们经常会通过媒体查询就可以完成对不同的屏幕展现不同的样式 在js中我们也可以通过检测屏幕的变化来展现不同的样式 在我的实例中:因为第一次打开也不知道到底是应该展示哪一个屏幕,所以会进行先判断一次,之后用addEventListener来是实现功能,暂时是通过这种方式实现的,以后有更好的方法再更新... mounted() { this.checkScreen() }, methods: { // 屏幕检测变化 checkScreen() { var _this = this if (d

  • 当vue路由变化时,改变导航栏的样式方法

    当我们需要做一个类似顶部 或 底部导航栏公共组件的时候,单击某个导航栏按钮,跳转到另一个组件, 并且改变导航栏按钮的样式,如果用<router-link to=""><router-link/> 跳转的时候,我们可以这样做, 改变router-link-active 的样式,它是路由path指向当前组件时系统自动生成的. 先看下效果: 贴上我的路由文件js export default new Router({ routes: [ { path: '/', co

  • vue watch自动检测数据变化实时渲染的方法

    vue watch自动检测数据变化实时渲染的方法

    本文介绍了vue watch自动检测数据变化实时渲染的方法,分享给大家,具体如下: 首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 第一个hand

  • vue检测对象和数组的变化分析

    在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态.可以直接在子组件修改对象或数组,但是并不会数据改变就会引起变化. 检测对象变化 1.不能检测到对象属性的添加或删除 var vm = new Vue({ data:{ data111:{ a = 1 } } }) data111.a = 2;//这个可以引起变化 但data111.b = 2:和vm.b = 2这个不能检测到变化 需要用 Vue.set(o

  • Vue 检测变化的注意事项

    Vue 检测变化的注意事项

    目录 深入响应式原理 如何追踪变化 检测变化的注意事项 对于对象 对于数组 声明响应式 property 异步更新队列 深入响应式原理 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题.在这个章节,我们将研究一下 Vue 响应式系统的底层的细节. 如何追踪变化 当你把一个普通的 JavaScript 对象传入 Vue 实例作为

  • vue动态路由:路由参数改变,视图不更新问题的解决

    问题描述: 使用vue动态路由("/route/:id" 形式) 传参的时候,修改页面参数,但是视图仍旧是之前的内容,没有进行刷新,示例如下: 原因分析: 具体原因在vue官方文档:响应路由参数的变化一节中有讲过: 当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用.因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效.不过,这也意味着组件的生命周期钩子不会再被调用. 复用组件时,想对路由参数的变化作出响应的话,你可以简单地 wa

  • 在Vue中实现随hash改变响应菜单高亮

    情景 Vue+Element 实现管理页面菜单栏, 点击菜单时 router 改变 hash 访问不同子组件. 但是改变 hash 时菜单栏展开状态和 highlight 并不会同步, 需要手动实现. Try Try See 第一反应是通过 onhashchange 监听 hash 的变化, 讲 location.hash.slice(2) 推给 menu 的 default-active 即可. 此时通过手动输入 url 或者前进后退时均可正常加载对应状态,但是通过组件中的 link 访问时,

  • vue监听dom大小改变案例

    需求描述:layout左边菜单栏收缩,右边的content区域的swiper宽度没有改变(没有图,朋友的问题,大体画一下) 类似于点击折叠左边目录会变小,右边内容区域会变大,但是swiper在刚开始的时候就确定了宽度,所以我的想法是监听右边宽度大小去updata一下.但是我用vue的watch监听$refs.swiper.offsetwidth失败了!!!!但是宽度确实是在改变的很费解,先说一下解决方法把 1.使用element-resize-detector var elementResize

  • 检测屏幕分辨率

    <!-- +++++++++++++++++检测屏幕分辨率++++++++++++++++++++++++++  --> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • vue里input根据value改变背景色的实例

    1.首先定义两个不同的 .null-input .el-input__inner { background-color: rgba(255, 255, 255, 0.8); color: #525661; font-size: 16px; } .no-null-input .el-input__inner { background-color: rgba(255, 255, 255, 1); color: #524F52; font-size: 16px; } 2.根据:class 控制inpu

随机推荐