解决echarts宽度100%变成了100px
原因外层div设置宽高为100%，在渲染出来的时候变成了100px这种情况一般都是echart所在的div一开始是display:none，一般出现在以下几种情况：echats放在了tab中解决方法：1、通过js获取外层div的宽高，然后设置给图表容器2、加 mychart.resize()所在div用了v-show，这种情况要不换成v-if，要不就设置初始值是true。...
·
原因
外层div设置宽高为100%，在渲染出来的时候变成了100px
这种情况一般都是echart所在的div一开始是display:none，一般出现在以下几种情况：
- echats放在了tab中
解决方法（没试过，嫌麻烦）：
1、通过js获取外层div的宽高，然后设置给图表容器
2、加 mychart.resize()
如果用的是elementUI，超简单解决办法：
el-tabs 有一个属性：lazy，表示标签是否延迟渲染。
设为true，延时加载即可
-
首次加载的v-if或者v-show设置为true。
-
所在div用了
v-show，这种情况要不换成v-if，要不就设置初始值是true。换成v-if可行，但在频繁显示或不显示的时候不适用v-if，所以在试用v-show且初始为false的时候，可以使用resize()
watch：{
show(v){
// 在show为true，也就是显示的时候，调用resize 解决100px的问题
if(v){
this.$nextTick(() => this.$refs.chart.instance.resize())
}
}
}
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
8
0- 0
已为社区贡献1条内容
所有评论(0)