哎哟，这玩意儿真是让人头秃。你是不是刚在电脑上跑得好好的 ECharts 图表，一拿到手机上看，直接变透明了？或者宽度只有几像素，高度完全没撑开，甚至干脆宽高都是 0，图死活显示不出来？
别急，我见过太多人栽在这里了。其实 ECharts 在移动端适配这块，确实有一些“坑”是原生 API 没帮你填平的。今天我不给你整那些虚头巴脑的理论，咱们直接上干货，把这三个最致命的问题——宽高为0、显示不全/被截断、resize 失效——连根拔起。
先搞懂：为什么手机端 ECharts 会“装死”？
在动手修之前，你得先知道敌人是谁。ECharts 底层是用 Canvas 绘制的，而 Canvas 的尺寸依赖 DOM 元素的 offsetWidth 和 offsetHeight。
在移动端，有几个经典的“杀手”：
- 父容器没有显式高度：CSS 里如果你只写了
width: 100%，但父级div没有明确的高度（比如height: 300px），或者父级高度依赖内容撑开，但子元素又是block且没有内容，那高度就是 0。ECharts 拿到高度 0，自然画不出来。 - Flex 布局的陷阱：这是重灾区！如果你把图表容器放在一个
display: flex的父容器里，又没有给图表容器设置具体的flex属性或高度，它可能会坍缩成 0。 - 初始化时机太早：页面还在渲染，或者父容器还是
display: none的状态时，你就调用了myChart.resize()或getOption()，获取到的 DOM 尺寸是错误的。
方案一：强制重置容器尺寸 + ResizeObserver 监听（解决宽高为0）
这是最稳妥的方案。核心思路是：不要信任 CSS 自动计算的尺寸，我们要用 JavaScript 强制给容器一个“保底”尺寸，并用 ResizeObserver 监听变化。
为什么用 ResizeObserver？因为 window.resize 只能监听窗口变化，监听不了容器内部变化，也监听不了某些移动端浏览器特有的布局重排。ResizeObserver 是现代浏览器的标准，专门用来监听元素尺寸变化。
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 关键：移动端视口设置，确保100%宽度有效 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ECharts 手机端完美适配</title>
<style>
/* 1. 确保根容器和 body 占满屏幕，防止高度塌陷 */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* 防止出现双重滚动条 */
}
/* 2. 图表容器：必须显式设置宽高！这是手机端不崩的关键 */
#chart-container {
width: 100%;
height: 300px; /* 这里必须给一个固定高度，或者父级必须有高度 */
background-color: #f5f5f5;
}
/* 如果是 Flex 布局容器，必须给子元素指定 grow 或具体高度 */
.flex-wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.chart-area {
flex: 1; /* 让图表区域占据剩余空间 */
width: 100%;
}
</style>
</head>
<body>
<div class="flex-wrapper">
<div class="chart-area">
<!-- ECharts 容器 -->
<div id="chart-container"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
// 获取 DOM 元素
const container = document.getElementById('chart-container');
// 初始化 ECharts
const myChart = echarts.init(container);
// 配置项（示例：一个简单的柱状图）
const option = {
tooltip: { trigger: 'axis' },
xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
yAxis: { type: 'value' },
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: { color: '#5470c6' }
}]
};
// 核心函数：设置尺寸并渲染
function setChartSize() {
// 1. 再次确保容器有尺寸（防止某些极端情况）
// 如果容器高度还是0，强制给一个默认高度，比如屏幕高度的30%
if (container.offsetHeight === 0) {
container.style.height = (window.innerHeight * 0.3) + 'px';
}
// 2. 执行 resize，这步非常重要！
// 很多新手只 init，不 resize，导致手机端初始渲染异常
myChart.resize();
// 3. 设置配置
myChart.setOption(option);
}
// 初次加载
setChartSize();
// 【终极适配】使用 ResizeObserver 监听容器尺寸变化
// 这比 window.addEventListener('resize') 更精准，能覆盖页面旋转、抽屉展开等场景
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
// 只有当尺寸真正变化时才 resize，避免性能浪费
if (entry.contentRect.width > 0 && entry.contentRect.height > 0) {
myChart.resize();
}
}
});
resizeObserver.observe(container);
// 兼容处理：虽然 ResizeObserver 很强大，但在某些旧版 iOS 或微信 WebView 中，
// 页面从后台切回前台时可能不会触发 ResizeObserver。
// 所以，再加一个 window resize 监听作为“保底”。
window.addEventListener('resize', () => {
myChart.resize();
});
// 生命周期清理（如果是单页应用 SPA，组件卸载时记得调用）
// window.addEventListener('beforeunload', () => myChart.dispose());
</script>
</body>
</html>
为什么这个方案能解决“宽高为0”？
- CSS 显式高度：我们在
.chart-area里用了flex: 1，配合父级.flex-wrapper的height: 100vh，确保 DOM 元素一定有一个计算出来的高度。 - JS 兜底逻辑：
if (container.offsetHeight === 0)这行代码是救火队员。万一 CSS 崩了，JS 强行给一个高度，保证图表能画出来。 myChart.resize()调用：很多人初始化完就完了，但在移动端，首屏渲染时机很微妙，主动调用一次resize能强制 ECharts 重新计算 Canvas 尺寸。- ResizeObserver：这是现代解决方案。它比
window resize更底层，能监听到容器本身的尺寸变化，而不是仅仅窗口变化。
方案二：处理“显示不全”与“被截断”——视口与 CSS 重置
有时候，图表不是没画出来，而是画了一半被切掉了，或者文字重叠在一起看不清。这通常是视口设置和CSS 默认样式搞的鬼。
常见症状
- 柱状图的标签被切掉一半。
- 图表整体偏左或偏右。
- 触摸滑动时，页面跟着滚动，而不是图表内的数据平移。
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!--
关键点1：viewport 必须禁止缩放，否则双指缩放会影响布局计算
关键点2：user-scalable=no 防止误触缩放导致 DOM 尺寸跳变
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ECharts 防截断适配</title>
<style>
/* CSS Reset 很重要：清除浏览器默认 margin/padding */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden; /* 禁止 body 滚动，把滚动权交给图表或单独处理 */
}
#chart-wrapper {
width: 100%;
height: 100%;
position: relative;
}
/* ECharts 容器 */
#main {
width: 100%;
height: 100%;
/* 关键：确保背景色可见，方便调试 */
background: #fff;
}
</style>
</head>
<body>
<div id="chart-wrapper">
<div id="main"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
const dom = document.getElementById('main');
const myChart = echarts.init(dom, null, {
// renderer: 'svg', // 如果追求极致清晰且数据量小，可尝试 SVG，但性能较差，一般用 canvas
});
const option = {
backgroundColor: '#f0f2f5',
tooltip: {
trigger: 'axis',
confine: true, // 【关键】将 tooltip 限制在容器内，防止超出屏幕
extraCssText: { boxShadow: '0 0 3px rgba(0,0,0,0.3)' }
},
// 关键配置：grid 控制图表绘制区域，手机端必须留足边距
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true, // 【关键】确保标签（X轴文字）不会溢出 grid 区域
top: 60
},
xAxis: {
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
axisLabel: {
interval: 0, // 【关键】强制显示所有标签，手机端屏幕窄，0 表示全部显示
rotate: 0, // 如果标签太长，可以设置为 45 度倾斜
fontSize: 10 // 手机端字体适当调小
}
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: { type: 'dashed' }
}
},
series: [{
name: 'Sales',
type: 'bar',
barWidth: '60%',
data: [10, 20, 15, 25, 30, 20, 18, 22],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
])
}
}]
};
myChart.setOption(option);
// 【关键】监听容器大小变化，实时调整
// 注意：这里我们用了一个简单的 debounce 思想，但直接用 resize 即可，因为 ECharts resize 很快
window.addEventListener('resize', () => {
myChart.resize();
});
// 额外：监听页面可见性变化，当用户从其他 App 切回来时，重新计算尺寸
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
myChart.resize();
}
});
</script>
</body>
</html>
这个方案解决了什么？
viewport的user-scalable=no：防止用户在双击屏幕时触发浏览器的缩放行为，这会导致offsetWidth瞬间改变，图表变形。grid.containLabel: true：这是解决“显示不全”的神器。它告诉 ECharts：“请把 X 轴的标签也算进绘图区域里，别给我切掉”。在手机上，X 轴标签很容易因为屏幕窄而被切掉一半，这个属性能自动把绘图区域往下撑一点。axisLabel.interval: 0：手机端屏幕窄，默认情况下 ECharts 会每隔几个标签显示一个（比如只显示第1个、第4个）。设为 0 强制显示所有，配合fontSize: 10保证清晰。tooltip.confine: true：手机端点击图表时，tooltip 弹出很容易超出屏幕右边界，这个属性强制 tooltip 显示在容器内部。visibilitychange事件：这是一个容易被忽略的细节。当你用手机看图表，然后切到微信回消息，再切回来，有时候图表会白屏或错位。监听这个事件并在页面恢复时调用resize()，能解决90%的“突然变黑/变白”问题。
方案三：Vue/React 等框架中的最佳实践（组件化封装）
如果你是在 Vue 或 React 项目中用 ECharts，光靠上面的原生 JS 代码还不够，因为框架有自己的生命周期。比如 Vue 的 mounted 时 DOM 可能还没完全渲染好，或者页面切换导致组件销毁但 ECharts 实例没销毁，造成内存泄漏。
下面是一个通用的、可直接复用的 Vue 3 组件示例，它也适用于 React（思路一致）。
Vue 3 组件示例
”`vue
<!--
注意：这里不要给 ref 对应的 div 设置固定的 height，
高度应该由父组件通过 CSS 控制，比如 height: 300px 或 height: 100%
-->