<think>根据用户查询，用户想了解如何使用
ECharts调整
画板（即
图表容器）的高度大小。结合站内引用，提供几种常见方法：
1. **通过CSS样式设置容器尺寸**（引用[3]示例）：
在HTML中为
图表容器`<div>`设置固定的宽高样式，例如：
```html
<div id="chartContainer" style="width: 900px; height: 600px;"></div>
```
或使用百分比（需确保父元素有明确高度）：
```html
<div id="chartContainer" style="width: 100%; height: 70vh;"></div>
```
2. **通过
JavaScript动态调整高度**（引用[2]示例）：
获取当前窗口尺寸并动态计算高度，通过`resize()`方法更新
图表：
```
javascript
// 初始化
图表
const myChart =
echarts.init(document.getElementById('chartContainer'));
// 动态设置容器高度（例如：窗口高度减去160px）
document.getElementById('chartContainer').style.height = (document.body.clientHeight - 160) + "px";
myChart.resize(); // 必须调用resize使新尺寸生效
```
3. **响应式设计：监听窗口变化自动调整**
添加窗口大小变化监听事件，实现自适应：
```
javascript
window.addEventListener('resize', () => {
document.getElementById('chartContainer').style.height = ... ; // 重新计算高度
myChart.resize();
});
```
> **注意事项**：
> - 调整的是**容器div的尺寸**，而非
ECharts配置项中的`height`（配置项中的`height`通常用于组件布局，如`grid`组件）.
> - 修改容器尺寸后**必须调用`myChart.resize()`** 通知
ECharts重新渲染（引用[2]）[^2].
> - 百分比单位需确保父元素有有效高度（引用[3]中容器使用固定像素）[^3].
§§相关问题§§
1. 如何让
ECharts图表随浏览器窗口大小变化自适应？
2.
ECharts中`resize()`方法的作用是什么？
3. 使用百分比布局时
ECharts容器高度不生效怎么办？
</think>###
ECharts调整
画板高度的方法
根据引用
内容，调整
ECharts画板（容器）高度主要有以下方法：
#### 1. **通过CSS样式设置容器高度** [^3]
在HTML中直接定义容器元素的样式：
```html
<div id="chartContainer" style="width: 100%; height: 500px;"></div>
```
```
javascript
// 初始化
图表
var myChart =
echarts.init(document.getElementById('chartContainer'));
```
- ✅ 优点：简单直接，支持像素(px)和百分比(%)
- ⚠️ 注意：百分比高度需确保父容器有明确高度
#### 2. **通过
JavaScript动态调整高度** [^2]
在运行时修改容器尺寸并触发重绘：
```
javascript
// 获取容器元素
const chartDom = document.getElementById('chartContainer');
// 动态设置新高度（示例：窗口高度-160px）
chartDom.style.height = (window.innerHeight - 160) + "px";
// 必须调用resize()方法更新
图表
myChart.resize();
```
- 🌟 关键点：修改尺寸后**必须调用**`myChart.resize()`生效
- 适用场景：响应式布局需要动态适配窗口大小
#### 3. **结合配置项的布局控制** [^1]
在series中设置相对布局参数（需容器有明确高度）：
```
javascript
series: [{
type: 'pie',
radius: '70%', // 饼
图相对容器大小的比例
center: ['50%','50%']// 居中布局
}]
```
- ⚖️ 比例关系：`radius`和`center`的百分比值基于容器尺寸计算
- 📏 兼容性：可与前两种方法组合使用
> **最佳实践建议**：
> 1. 固定高度场景 → 采用方法1的CSS定义
> 2. 响应式场景 → 采用方法2的JS动态计算 + `resize()`
> 3.
图表内部元素布局 → 使用方法3的百分比配置
>
> 修改容器尺寸后必须执行`myChart.resize()`，否则
图表不会重绘[^2][^3]。
本文介绍如何在Echarts图表中因为工作需要实现X轴的多维度展示，即叠加几层X轴，由于Echart内置功能无法满足位置计算需求，故选择自定义绘制。
最低0.47元/天 解锁文章
扫一扫
5227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
