问题描述:
在vue中使用echarts绘制图表的时候, 会发现我echats的父元素的width是100%,但是绘制成功之后canvas的width一直是100px, 导致图表显示有问题
<div class="data" v-show="excelData.length > 0">
<div id="echart-app" style="width: 100%; height: 500px"></div>
</div>
解决方法:
1. 网上最简单的解决方法是在setOption之后call resize()方法,但是我的没有成功, 但是可以先尝试
2. 在init图表的div之前就自定义好width,
我的图表需要放在固定div里面, 所以我获取了有width数值的父div (excelShow)的width, 并赋值给echarts 的div, 并且在setOption之前添加了window的监听事件, 这样当你的窗口发生变化时可以自适应width。
具体的width的数值可以根据具体项目来具体计算, 也可以使用window.innerWidth. 看你自己的页面。
修改成功之后的结果: