关于Ant Design Pro Vue引入Viser图表不响应或超出的问题！

版权声明：转载请标明出处。 https://blog.csdn.net/qq_42172829/article/details/85701181

问题1：Viser在响应式布局中，会导致图表超出的问题，或者跟随导航栏伸缩导致图表过窄或过长。

可能出现的原因！1.由于图表是Canvas画布，在他加载时只确定栅格布局的宽度，当导航栏再次伸缩，就出超出，溢出。

解决办法：先render其他父级标签，确定父级宽高，在图表外层包裹的DIV上加v-if ，先让栅格布局加载完成，使用nextTick方法调用状态再让他显示出来！

<template>
    <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
		<div style="background: #fff; margin: 10px;" v-if='showChart'>
			<bar></bar>
		</div>
    </a-col>
</template>
<script>
  import bar from '@/components/chart/bar'
  
  export default{
  	name:'Monitor',
  	data(){
  		return{
  			showChart:false,
  		}
  	},
  	mounted(){
  		this.$nextTick(()=>{this.showChart=true})
  	},
  	components:{
  		bar,
  	}
  }
</script>

问题2：图表因为导航栏伸缩的原因导致图表不自动适应！

/**
 * 触发 window.resize
 */
function triggerWindowResizeEvent() {
  const event = document.createEvent('HTMLEvents')
  event.initEvent('resize', true, true)
  event.eventType = 'message'
  window.dispatchEvent(event)
}

将这个方法绑定到点击伸缩导航栏的按钮上，每次伸缩会触发resize让图表自动适应