echarts——父元素宽度100%，但canvas宽度100px

问题描述：

在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. 看你自己的页面。

 修改成功之后的结果：