vue使用Echart跟随窗口大小改变而重新绘制时出现读取窗口大小不及时的问题

通过原生自带的window.onresize监听窗口大小 + Echart自带的冲渲染函数.resize()
刚开始我改变大小时感觉挺好但是我一点窗口最大化就开始出现问题他没有时时根据窗口大小改变而是跟进上一次的大小改变的
我找了好久才想到是不是执行循序的问题就加了个定时器setTimeout 发现加上后就正常了确实可以

<div><div ref="FileNumEchartMain" :style="{width: this.EchartWidth + 'px', height: this.Echartheight + 'px'}"></div>
</div>

没加之前

// onresize 我是写在mounted中  应该也可以写在created中window.onresize = async () => {this.EchartWidth =  document.body.clientWidththis.Echartheight = this.EchartWidth / 2this.FileNumChart.resize()console.log('onresize', nowScreenWidth,this.EchartWidth,this.Echartheight)}

加了之后

 window.onresize = async () => {this.EchartWidth =  document.body.clientWidththis.Echartheight = this.EchartWidth / 2setTimeout(() => {this.FileNumChart.resize()}, 100);console.log('onresize', nowScreenWidth,this.EchartWidth,this.Echartheight)}

我在vue中的初始化函数上面的 this.FileNumChart就在这生成的

initFileNumEchart(type){this.FileNumChart = echarts.init(this.$refs.FileNumEchartMain);let option;option = {tooltip: {// 触发类型，默认数据触发trigger: 'item',// 触发位置position: 'top',// 文本设置textStyle: {// width: 10,// height: 20,fontSize: 8}},// 标题title: {text: '文件数量统计',// 标题位置 内边距padding: [10, 10]},// 数据图形颜色color: '#25C1C3',xAxis: {type: 'category',// x轴文字 旋转角度// axisLabel: {//   rotate: 45,// },data: ['文档', '图片', '视频', '音频', '其他']},yAxis: {type: 'value'},series: [{barWidth:'40%',data: [120, 200, 150, 80, 70, 110],type: 'bar',markLine: {label: {color: "rgba(0, 255, 229, 1)"},lineStyle: {color: "rgba(0, 255, 229, 1)"},data: [{name: '平均线',type: "average",}]}}]};this.FileNumChart.setOption(option);this.FileNumChart.on('click',(param) => {console.log('FileNumChart click',param)});console.log('initEchart')},

vue使用Echart跟随窗口大小改变而重新绘制时出现读取窗口大小不及时的问题相关推荐

html input 的value变颜色,vue里input根据value改变背景色的实例
这篇文章主要为大家详细介绍了vue里input根据value改变背景色的实例,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 1.首先定义两个不同 ...
窗口大小改变时，显示内容的处理(正投影情况)
当窗口大小改变时,对窗口显示内容不同的要求,我们要做的工作也不同. 1.显示内容不变,相对位置不变(例如始终居中) 视口大小不变,裁剪区域不变,视口的初始位置根据窗口大小进行调整. 2.显示内容长宽比 ...
vue使用echart绘制全国地图，叠加图表
场景: 大数据展示全国各省份信息,绘制地图,并在每个省份上叠加图表. 需要做的就是 1.绘制全国地图(不同省份根据数据的不同而颜色不同) 2.每个省份都需要单独叠加一个图表(饼图) 3.地图缩放.图表 ...
vue使用echart 完成3d系列2之曲面锥形
vue使用echart 完成3d系列1之曲面空心圆 vue使用echart 完成3d系列3之曲面空心半圆效果图第一步,先安装依赖 npm install echarts-gl -S npm ins ...
【Java】监听jframe窗口大小改变函数：addComponentListener
问题描述:主要用于解决Jframe窗口大小变化时,里面的组件的位置也会自适应的移动. 相当于js里面的窗口大小改变监听函数: window.onresize = function(){//js脚本接口 ...
uniapp、vue，vuex中state改变，getters不动态改变的完美解决方案！
uniapp.vue,vuex中state改变,getters不动态改变的完美解决方案! 参考文章: (1)uniapp.vue,vuex中state改变,getters不动态改变的完美解决方案! ( ...
jquery监听窗口大小改变事件jquery.resizeend
方法一: $(function(){// Bind the resize event. When any test element's size changes, update its// corre ...
当浏览器窗口大小改变时，设置显示内容的高度
1 window.οnlοad=function(){ 2 changeDivHeight(); 3 } 4 //当浏览器窗口大小改变时,设置显示内容的高度 5 window.οnresize=fun ...
vue制作echart图表随着画面等比例放大缩小
因为本身echart做的图表不会随着div的大小比例进行变化,因此下面介绍两种控制echart大小变化的方法. 第一种:根据屏幕分辨率变化切换echart图表的大小变化在mounted中添加监听事件 ...

vue使用Echart跟随窗口大小改变而重新绘制时出现读取窗口大小不及时的问题

vue使用Echart跟随窗口大小改变而重新绘制时出现读取窗口大小不及时的问题相关推荐

最新文章

热门文章