echarts 宽度写成百分比后只显示100px的问题

vue项目里用到了echarts,但是发现渲染出来的宽度只有100px,设置的100%宽度不生效
后来找了很久的原因,发现是因为配合使用了 element-ui的tabs切换导致的,tab下的内容默认是display:none,所以echarts的父级宽度为0,就默认是100px了
尝试了好几种解决办法,最终我的解决方案是写了一个空的100%宽度的div在tabs外面,这样能保证在渲染的时候这个div的宽度有了,然后再通过dom操作的方式将echarts的宽度绑定到这个div上,这样就能起到100%宽度的效果了
echarts 宽度写成百分比后只显示100px的问题_第1张图片
实现如下:
echarts 宽度写成百分比后只显示100px的问题_第2张图片

echarts 宽度写成百分比后只显示100px的问题_第3张图片

document.getElementById('trendChart').style.width = document.getElementById('innerWidthAuto').offsetWidth + 'px' //折线图

你可能感兴趣的:(vue,echarts)