echarts的宽度100%不生效的问题

echarts的宽度100%不生效的问题

首先先看问题图片，我在折现图的div设置了宽度100%，但是在页面上实际只有100px宽度。

原因是，我在页面中使用了tab切换，这时图表的父容器div是隐藏的（display：none），图表在执行js初始化刷新的时候找不到这个元素，所以echarts就默认给自己设置了100px的宽，也就是自动将“100%”转成了“100”，最后计算出来的图表就成了100px。

解决方法：

1. 手动添加宽度把它的宽度的具体值取出，在初始化图表之前直接赋给图表、

   let myCharts=document.querySelecter('.myChart') 
   myCharts.style.width=window.innerWidth+ 'px' 
   let lineMyChart = this.$echarts.init(document.getElementById('myChart'))
   

2. resize事件监听。可以封装个方法，也可以在mounted里写

     window.addEventListener('resize', () => {
          let  myCharts=document.getElementById('myChart')                        
          myCharts.style.width=window.innerWidth+ 'px'   
          let myChart = echarts.init(document.getElementById('myChart'))
          this.myChart.resize()
   })

3. 使用this.$nextTick(() => {//调用图表的事件}）主动触发一下图表，DOM就会进行更新，使之强制渲染就可以正常显示了
4. v-show改成v-if。v-show 本身是结构已经存在，当数据发生变化时，结构并未重新渲染，v-if是会重新渲染组件。