echart随窗口大小变化自适应(Vue)

直入主题啦!效果图:
在这里插入图片描述
Vue中使用echart的教程很多,这里主要记录下自适应窗口大小变化,因为踩了很多坑,最终解决了,希望能帮助到大家(下面是缩小后的图)
在这里插入图片描述
其实就只要改几行代码:

  1. width换成百分比(height应该也OK)
<div id="myChart" :style="{width:'100%', height:'350px'}"></div>
  1. 随窗口大小调整(加在setOption之后;一定要加哦,否则是不会变的)
myChart.setOption(options);
window.onresize = myChart.resize;   //加这行代码,没错!

下面还有一些小建议

  1. 安装与按需加载

安装

npm install echarts -S

按需加载

//全局环境
let echarts 
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值