echarts自适应父div大小

百度了n种办法,试了n种办法后终于测出来了。

方法一:window.οnresize=myChart.resize;  但是没有效果

方法二:

window.addEventListener("resize", function () {

          myChart.resize();

        });

依旧没有效果

方法三:

<div class="summary">
    <div id="annual" ></div>
</div>


$('.summary').resize(function () {
    var annual = echarts.init(document.getElementById("annual"));
	annual.resize();
});

依旧没有效果。

最后:百度到jquery有resize()事件,但直接调用没有起作用,引入jquery.ba-resize.js文件就可以了。经过试验,终于ok了

query有resize()事件,但直接调用没有起作用,必须引入jquery.ba-resize.js文件。

下载位置:https://download.csdn.net/download/weixin_38383877/10727216

例如:


<div class="chart">
    <div class="col-md-3" style="width:73%;height:270px" id="chartx"></div>
</div>
<script src="/static/assets/scripts/jquery.ba-resize.js"></script>
js代码:
var myChartx = echarts.init(document.getElementById('chartx'));
$('.chart').resize(function(){
		myChartx.resize();
	});

参考自:https://blog.csdn.net/yf814359680/article/details/71404654
 

  • 6
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 12
    评论
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

chde2Wang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值