Element使用Echarts切换时宽度挤压问题

1.问题描述

在使用v-if、tabs等切换时，切换的时候echart的柱状图等都会发生宽度变窄，其造成原因是由于渲染的时机不对，在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echarts都执行。因为echarts会根据父级给宽度，而在初始化页面的时候其他tabs切换是display：none；没有宽度，所以会发生次问题。

2.解决思路

如果是el-tabs的切换，即可使用其element ui官方文档的:lazy = "true"即可。

如果是v-if的切换，可使用插件vue-lazy-render，其功能可以延迟加载组件、控制延迟加载的时间、监控数组的变化和设定数据量来决定是否开启延迟加载

3.使用方法

安装：npm install vue-lazy-render

在main.js下进行导入

import LazyRender from 'vue-lazy-render'
Vue.use(LazyRender)

基本使用

<lazy-render>
    <my-component></my-component>
</lazy-render>

4.参考来源

https://www.mianshigee.com/project/vue-lazy-render/