1. 程式人生 > >echarts自適應父div大小

echarts自適應父div大小

百度了n種辦法,試了n種辦法後終於測出來了。

方法一:window.onresize=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