问题描述

具体问题是，设置echarts宽度width为100%，结果出来的时候就变成了100px；这种情况一般都是 echarts所在的父容器一开始是display:none，在一开始初始化执行js的时候找不到这个元素，所以会出现问题。

解决方案

一开始就把echatrs的的宽度定死，监听浏览器大小变化，把echerts用div包裹起来，每当浏览器发生变化，拿到div的值，并赋值给echerts这个id。

示例：

首先，我们要获取到echarts图表标签元素，设置初始宽度。我使用的是 window.innerWidth - 200 + “px”;可以根据自己的需求，设置相应的宽度。

window.addEventListener 主要是为了实现宽度自适应，会根据浏览器窗口的变化，来自动改变图表宽度。示例代码如下：

const statInfo = this.statInfos.nativeElement; // 获取图表元素
statInfo.style.width = window.innerWidth - 200 + "px";  //初始化echarts图表宽度
const myChart = echarts.init(statInfo);
// 设置宽度自适应
window.addEventListener('resize', () => { 
    statInfo.style.width = window.innerWidth - 200 + "px";
    myChart.resize();
});

elementUI的el-tabs下使用

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

1、el-tabs 有一个属性：lazy，表示标签是否延迟渲染。 设为true，延时加载即可。

2、首次加载的v-if或者v-show设置为true。

3、所在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())
	}
    }
}

链接: https://www.fly63.com/article/detial/11945