vue+echart踩坑记

需求描述：页面中按钮控制上传文件后显示数据，图表显示
功能点描述：控制显示隐藏(没上传文件前不显示图表),获取数据渲染图表
出现问题：

1. v-if控制显示隐藏发现图表不渲染
2. 渲染成功图表显示很小一块
3. 图表显示正常调试变小，关闭调试图表不变回原来的大小
4. 一个页面多个图表时，图表不能自适应
5. 第一次渲染图表出现，刷新页面图表没有了，怎么刷新都不出现

解决方案

1. 第一个问题修改v-if为v-show可解决
2. 第二个问题 动态控制容器的大小即可解决
3. 第三个问题

//图表配置setoption之后加
setTimeout(function() {
window.onresize = function() {
				mycharts.resize();
			}
		}, 200)

即可解决！
4.第四个问题 首先四个图表只有一个可以自适应 百度到使用以下进行设置自适应

resizeEvent(ref) {
					console.log(ref)
					window.addEventListener('resize', () => {
						ref.resize();
					})
				},

接着一个都不行(手动捂脸) 不要慌，我的图表容器是动态设置的宽度，所以如下

	mounted() {
				this.contentStyleObj = window.innerWidth-50;//contentStyleObj这是我的容器宽度动态变量名
				 window.onresize = () => {
					return (() => {
					  this.contentStyleObj =  window.innerWidth-50;
					})();
				  };
			},

5. 最后一个问题强调一定要给图表的容器设置大小宽高

最后 好心累！！！