echarts自适应窗口大小

要实现echarts的自适应窗口大小，可以通过监听resize事件并调用echarts对象的resize方法来实现。具体实现的代码可以分为两种方式。

第一种方式是使用window.onresize来监听窗口大小改变事件，并在事件回调函数中调用echarts对象的resize方法。例如，在Vue中，可以将echarts对象绑定到data对象中的this.chart上：

this.chart = echarts.init(this.$el, "macarons");
this.chart.setOption({...});

window.onresize = this.chart.resize;

这样，当窗口大小发生改变时，会执行resize方法重新绘制图表。

第二种方式是使用addEventListener来监听resize事件，并在事件回调函数中调用echarts对象的resize方法。同样，在Vue中，可以将echarts对象绑定到data对象中的this.chart上：

this.chart = echarts.init(this.$el, "macarons");
this.chart.setOption({...});

let that = this;
window.addEventListener("resize", function () {
  that.chart.resize();
});

这样，当窗口大小发生改变时，会执行resize方法重新绘制图表。

综上所述，以上两种方式都是通过监听resize事件来实现echarts的自适应窗口大小。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Echarts 如何设置图表自适应窗口大小](https://blog.csdn.net/qq_36126031/article/details/108336984)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]