解决 Vue 渲染echarts图表宽度只显示100px问题


刚刚接触vue不久,在开发过程中遇到不少坑,走了很多弯路,其中一个就是在echarts图表加载渲染时,图表的宽度只能显示100px问题,这篇文章记录解决方案,对于像我一样的初学者来说,可能会有一些参考意义.
出现这个问题的情况目前来说我只在

<el-tabs type="border-card" v-model="tabsName" @tab-click="handleClick">
  <el-tab-pane label="商户">
    <el-select v-model="subSelect" placeholder="商户" @change="handleChangeSelect">
      <el-option
        v-for="item in subSelectValue"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select>
    <div id="lineChartEx1" class="chart" v-loading="loading2"></div>
  </el-tab-pane>
  <el-tab-pane label="性别">
    <el-select v-model="subSelect" placeholder="性别" @change="handleChangeSelect">
      <el-option
        v-for="item in subSelectValue"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select>
    <div id="lineChartEx2" class="chart" v-loading="loading2"></div>
  </el-tab-pane>
<el-tabs>

这一种情况下遇到,在调试时,发现是图表在页面加载时生成的width就是100px,上网查找说是没有resize,我照做之后还是没有解决,



几经周折之后,总算求到了解决之道



注意: 插图中的window.innerWidth / 2 - 20 + 'px'并不是固定的,完全根据自己实际页面排版进行调整即可.
---------------------
【转载】仅作分享，侵删
作者：闭关小菜鸟
原文：https://blog.csdn.net/u012891460/article/details/85006458