首先来品鉴一下官方文档上的写法:
在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。
比如,图表容器是一个高度为 400px、宽度为页面 100% 的节点,你希望在浏览器宽度改变的时候,始终保持图表宽度是页面的 100%。
这种情况下,可以监听页面的 window.onresize
事件获取浏览器大小改变的事件,然后调用 echartsInstance.resize 改变图表的大小。
<style>
#main,
html,
body {
width: 100%;
}
#main {
height: 400px;
}
</style>
<div id="main"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
window.onresize = function() {
myChart.resize();
};
</script>
window.onresize直接给window的onresize属性绑定事件,在窗口大小发生改变时调用后面的函数
试了之后发现不是很好使,原因不清楚,可能是因为我在mounted里面调用了多个绘图方法,而onresize只能绑定一个事件。
不过下面这种写法是好使的
chart(element, item) {
var myChart = echarts.init(document.getElementById(element))
myChart.setOption(item)
window.addEventListener('resize', function() {
myChart.resize()
})
},
使用addEventListener()添加监听resize的事件,这样resize触发时可以调用多个函数。