Vue中el-tabs不显示其中的echarts图像的问题

今天我们需要完成一个效果记录一下遇到的问题

这是我们需要完成的效果，很明显就是一个el-tabs加echarts来解决的，然后我们将一般页面的echarts站到echarts发现只有第一个显示其他不显示，而且显示比例出现了问题。

<el-tabs >
       <el-tab-pane label="当月" name="first">
              <div style="width: 900px" >
                   <column-chart :id="'deptin'" :height="'400px'" ref="deptin"></column-chart>
               </div>
         </el-tab-pane>
         <el-tab-pane label="当季"  name="second">
               <div style="width: 900px" >
                   <column-chart :id="'deptin'" :height="'400px'" ref="deptin"></column-chart>
                </div>
          </el-tab-pane>
           <el-tab-pane label="半年" name="third">
           		<div style="width: 900px" >
                   <column-chart :id="'deptin'" :height="'400px'" ref="deptin"></column-chart>
                </div>
            </el-tab-pane>
           <el-tab-pane label="本年" name="fourth">
                <div style="width: 900px" >
                    <column-chart :id="'deptin'" :height="'400px'" ref="deptin"></column-chart>
                </div>
           </el-tab-pane>
</el-tabs>

上面的这四个echarts在页面上单独都能够使用我看了代码也没有问题，看了console也没有报错这个时候我去问了我们组唯一的前段，我得知的解决方法是因为echarts组件如果id相同就会出现问题，于是我重新写了不同的id

<el-tabs  >
                        <el-tab-pane label="当月" name="first">
                            <div style="width: 900px" >
                                <column-chart :id="'deptin1'" :height="'400px'"  ref="deptin1"></column-chart>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="当季"  name="second">
                            <div style="width: 900px" >
                                <column-chart :id="'deptin2'" :height="'400px'"  ref="deptin2"></column-chart>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="半年" name="third">
                            <div style="width: 900px" >
                                <column-chart :id="'deptin3'" :height="'400px'"  ref="deptin3"></column-chart>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="本年" name="fourth">
                            <div style="width: 900px" >
                                <column-chart :id="'deptin4'" :height="'400px'"  ref="deptin4"></column-chart>
                            </div>
                        </el-tab-pane>
                    </el-tabs>

但是发现这样四个确实都是显示但是会有另外的问题。
第一是这四个都是站的很小一个部门，我设定的width：100%，但是他们还是挤在左边一点点的位置于是我加上了:width="'800px'"才将宽度的问题解决，我不知道种方法是不是普遍的因为这个组件使我们有过轻微的封装和修改
然后是我发现不点击标签不显示，我自己思考了很久还是不会于是又去问了问前段，是因为tabs上面的v-model="activeNameout"这个属性没有绑定，绑定是绑定的el-tab-pane的name
所以将这两个问题解决之后
正常可以使用的代码

<el-tabs  v-model="activeNameout">
                        <el-tab-pane label="当月" name="first">
                            <div style="width: 900px" >
                                <column-chart :id="'deptin1'" :height="'400px'" :width="'800px'" ref="deptin1"></column-chart>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="当季"  name="second">
                            <div style="width: 900px" >
                                <column-chart :id="'deptin2'" :height="'400px'" :width="'800px'" ref="deptin2"></column-chart>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="半年" name="third">
                            <div style="width: 900px" >
                                <column-chart :id="'deptin3'" :height="'400px'" :width="'800px'" ref="deptin3"></column-chart>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="本年" name="fourth">
                            <div style="width: 900px" >
                                <column-chart :id="'deptin4'" :height="'400px'" :width="'800px'" ref="deptin4"></column-chart>
                            </div>
                        </el-tab-pane>
                    </el-tabs>

实现效果