echart随窗口大小变化自适应（Vue）

直入主题啦！效果图：

Vue中使用echart的教程很多，这里主要记录下自适应窗口大小变化，因为踩了很多坑，最终解决了，希望能帮助到大家（下面是缩小后的图）

其实就只要改几行代码：

1. width换成百分比（height应该也OK）

<div id="myChart" :style="{width:'100%', height:'350px'}"></div>

2. 随窗口大小调整(加在setOption之后；一定要加哦，否则是不会变的)

myChart.setOption(options);
window.onresize = myChart.resize;   //加这行代码，没错！

下面还有一些小建议

1. 安装与按需加载

安装

npm install echarts -S

按需加载

//全局环境
let echarts = require("echarts/lib/echarts");
// 按需要引入折线图组件(其他的就不需要啦)
require("echarts/lib/chart/line");

2. 一个调试工具（不太熟