原因

外层div设置宽高为100%,在渲染出来的时候变成了100px

这种情况一般都是echart所在的div一开始是display:none,一般出现在以下几种情况:

  1. echats放在了tab中
解决方法(没试过,嫌麻烦):
1、通过js获取外层div的宽高,然后设置给图表容器
2、加 mychart.resize()  

如果用的是elementUI超简单解决办法

el-tabs 有一个属性:lazy,表示标签是否延迟渲染。
设为true,延时加载即可
  1. 首次加载的v-if或者v-show设置为true。

  2. 所在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())
		}
	}
}
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐