echarts自适应大小

Echarts可以通过设置容器的大小来实现自适应大小，它提供了两种方法：

1. 使用百分比设置容器大小，例如：

<div id="chart" style="width: 100%; height: 400px;"></div>

这里将容器的宽度设置为100%，高度为400像素，这样当容器的父元素大小改变时，它也会相应地改变大小。

2. 使用JavaScript设置容器大小，例如：

var chart = echarts.init(document.getElementById('chart'));
chart.resize();

这里通过调用 `resize()` 方法来重新计算和绘制图表，从而自适应容器大小。你可以在窗口大小发生变化时调用 `resize()` 方法，来实现图表的自适应大小。

相关问题

Echarts自适应大小

Echarts可以通过设置容器的大小来实现自适应大小，它提供了两种方法：

1. 使用百分比设置容器大小，例如：

<div id="chart" style="width: 100%; height: 400px;"></div>

这里将容器的宽度设置为100%，高度为400像素，这样当容器的父元素大小改变时，它也会相应地改变大小。

2. 使用JavaScript设置容器大小，例如：

var chart = echarts.init(document.getElementById('chart'));
chart.resize();

这里通过调用 `resize()` 方法来重新计算和绘制图表，从而自适应容器大小。你可以在窗口大小发生变化时调用 `resize()` 方法，来实现图表的自适应大小。

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 ]