黑马程序员技术交流社区

标题: 【上海校区】解决 Vue 渲染echarts图表宽度只显示100px问题 [打印本页]

作者: 不二晨 时间: 2018-12-21 10:02
标题: 【上海校区】解决 Vue 渲染echarts图表宽度只显示100px问题
解决 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

作者: 不二晨 时间: 2018-12-26 10:16

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2