直入主题啦!效果图:
Vue中使用echart的教程很多,这里主要记录下自适应窗口大小变化,因为踩了很多坑,最终解决了,希望能帮助到大家(下面是缩小后的图)
其实就只要改几行代码:
- width换成百分比(height应该也OK)
<div id="myChart" :style="{width:'100%', height:'350px'}"></div>
- 随窗口大小调整(加在setOption之后;一定要加哦,否则是不会变的)
myChart.setOption(options);
window.onresize = myChart.resize; //加这行代码,没错!
下面还有一些小建议
- 安装与按需加载
安装
npm install echarts -S
按需加载
//全局环境
let echarts