解决 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'并不是固定的,完全根据自己实际页面排版进行调整即可.