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样式实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“Vue检测屏幕变化来改变不同的charts样式实例”评论...
更新动态
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]