先说点心里话，ECharts在移动端翻车这事儿，简直比在地铁上找不着扶手还让人心慌。图表一半被截断、坐标轴文字挤成一团、或者干脆整个canvas缩在小角落里装可怜——这些问题坑了不少人，包括我自己。别急，今天咱们就把这层窗户纸捅破，从根儿上解决它。
为什么会显示不全？先搞清楚”元凶”
移动端图表显示异常，通常不是ECharts的锅，而是.viewport配置不当和容器尺寸计算错误这两个”罪魁祸首”在作祟。
让我给你拆开揉碎了讲：
第一宗罪：meta viewport设置错误
很多开发者在HTML头部写了这样的viewport：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
看着没问题对吧？但user-scalable=no会阻止用户缩放，而某些安卓浏览器（尤其是老版本Chrome WebView）在处理固定比例缩放时会把画布裁切掉。更坑的是，如果你没有设置initial-scale，不同设备会用自己的默认缩放值，导致ECharts拿到的宽度根本不是你想要的。
第二宗罪：容器高度没设或者用px写死
<div id="chart" style="width: 100%; height: 300px;"></div>
300px在iPhone 14 Pro上可能刚好，但在小屏安卓机（比如4.7英寸）上就显臃肿，在大屏机上又显得寒酸。更可怕的是，如果父容器没有明确高度，或者用了position: absolute导致布局塌陷，ECharts拿到的offsetHeight可能是0，画布直接缩成一条线。
第三宗罪：resize事件监听时机不对
window.addEventListener('resize', () => {
myChart.resize();
});
这段代码看起来完美，但在移动端，resize事件触发时，浏览器可能还没完成布局重排。更糟的是，iOS Safari在页面滚动时会频繁触发resize，导致图表疯狂重绘，出现闪烁甚至内存溢出。
正确姿势：一套靠谱的移动端适配方案
第一步：viewport设置要讲究
别再用那种”一刀切”的meta标签了。针对不同场景，给你三个推荐写法：
场景A：普通H5页面（推荐）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
注意viewport-fit=cover这个属性，它能确保在iPhone X系列这类有”刘海”的设备上，内容能延伸到安全区域之外。minimum-scale=1.0和maximum-scale=1.0锁定缩放，避免用户误触导致布局错乱。
场景B：微信内嵌页（特别处理）
微信内置浏览器有自己的坑，特别是在Android微信7.0以下版本：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这里必须加user-scalable=no，否则微信的JS-SDK会干扰默认缩放行为。但代价是用户无法双指缩放，所以要在图表上加手动缩放控件。
场景C：WebView混合开发（Android/iOS原生封装）
<meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=device-dpi">
target-densitydpi=device-dpi是安卓特有的，它能告诉系统用设备真实DPI渲染，避免WebView的缩放补偿算法把画布裁掉。
第二步：容器高度用”动态计算”代替”硬编码”
别再写height: 300px了！看这段代码：
<style>
.chart-container {
width: 100%;
/* 用padding-bottom技巧保持16:9比例，或者用CSS变量动态设置 */
--chart-height: 40vh; /* 视口高度的40% */
height: var(--chart-height);
min-height: 200px; /* 最小高度保底 */
max-height: 500px; /* 最大高度封顶 */
}
/* 针对不同屏幕尺寸的微调 */
@media (max-width: 375px) {
.chart-container {
--chart-height: 35vh;
}
}
@media (min-width: 768px) {
.chart-container {
--chart-height: 45vh;
}
}
</style>
<div id="chart" class="chart-container"></div>
用CSS变量+媒体查询的方式，比JS动态计算更稳定，也不会触发重排。如果非要JS计算，用这个方案：
function getChartHeight() {
const vh = window.innerHeight;
// 根据屏幕宽度动态调整比例
const width = window.innerWidth;
const ratio = width < 375 ? 0.35 : (width < 768 ? 0.4 : 0.45);
return Math.floor(vh * ratio);
}
const chartDom = document.getElementById('chart');
chartDom.style.height = getChartHeight() + 'px';
第三步：ECharts初始化时的尺寸处理
这是最关键的环节！很多开发者在这里踩坑。
错误示范（新手常犯）：
const myChart = echarts.init(document.getElementById('chart'));
// 此时chart的offsetHeight可能还是0！
正确做法（三件套）：
function initChart() {
const chartDom = document.getElementById('chart');
// 1. 确保容器有正确尺寸
// 用requestAnimationFrame等待布局完成
requestAnimationFrame(() => {
const width = chartDom.clientWidth;
const height = chartDom.clientHeight;
// 2. 如果尺寸异常，重新计算
if (width === 0 || height === 0) {
chartDom.style.height = getChartHeight() + 'px';
// 强制重排
void chartDom.offsetHeight;
return initChart(); // 递归重试
}
// 3. 初始化时传入精确尺寸
const myChart = echarts.init(chartDom, null, {
renderer: 'canvas', // 优先使用canvas，比svg在移动端性能更好
devicePixelRatio: window.devicePixelRatio || 2, // 高清屏适配
width: width,
height: height
});
// 4. 设置配置项
myChart.setOption({
// ... 你的配置
});
// 5. 绑定resize事件（用防抖优化）
let resizeTimer = null;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
myChart.resize();
}, 150); // 150ms防抖，避免频繁触发
});
});
}
// 页面加载完成后初始化
window.addEventListener('load', initChart);
// 兼容性处理：DOMContentLoaded也可能触发
window.addEventListener('DOMContentLoaded', () => {
setTimeout(initChart, 100);
});
注意几个细节：
devicePixelRatio：Retina屏（iPhone 4/5/6/7/8/X等）的DPR是2或3，不设置的话图表会模糊。设为window.devicePixelRatio可以自适应。- 防抖（debounce）：移动端resize事件会频繁触发，不加防抖会导致性能问题甚至崩溃。150ms是一个比较安全的值。
- 递归重试：有些时候容器尺寸确实是0（比如页面刚加载，父元素还没渲染完），递归重试能解决99%的”画布为0”问题。
第四步：文字遮挡的专项修复
就算图表尺寸对了，坐标轴文字、图例标签还是会溢出。看这个配置：
option = {
// X轴文字倾斜，防止重叠
xAxis: {
axisLabel: {
rotate: 30, // 旋转30度，给文字留空间
interval: 0, // 不间隔显示，全部显示
fontSize: 10, // 移动端适当缩小字体
color: '#666',
// 关键：设置边界修正，防止文字被裁切
boundaryGap: true
}
},
// Y轴文字右对齐，留出更多空间
yAxis: {
axisLabel: {
align: 'right',
marginRight: 5,
fontSize: 10
}
},
// 图例放在底部，避免遮挡图表
legend: {
bottom: 10,
left: 'center',
textStyle: {
fontSize: 10
}
},
// 添加边框，给内容留出padding
grid: {
top: 60, // 上方留出图例空间
left: 40, // 左方留出Y轴文字空间
right: 20, // 右方留一点边距
bottom: 50, // 下方留出X轴文字空间
containLabel: true // 关键：把label也算进grid范围，防止裁切
},
// 对于小屏设备，隐藏部分冗余信息
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
// 手机端隐藏右下角的缩放条，节省空间
show: window.innerWidth > 768
}
]
};
containLabel: true是解决文字遮挡的核心配置！它告诉ECharts把坐标轴文字也算进网格范围内，这样文字就不会被裁切了。
第五步：响应式断点处理（进阶）
如果你要做成真正的自适应图表，可以根据屏幕宽度动态调整配置：
function getResponsiveOption() {
const width = window.innerWidth;
const isSmallScreen = width < 375;
const isMediumScreen = width >= 375 && width < 768;
return {
// 根据屏幕尺寸动态调整
grid: {
top: isSmallScreen ? 40 : 60,
left: isSmallScreen ? 30 : 40,
right: isSmallScreen ? 10 : 20,
bottom: isSmallScreen ? 40 : 50,
containLabel: true
},
xAxis: {
axisLabel: {
fontSize: isSmallScreen ? 9 : 10,
rotate: isSmallScreen ? 45 : 30
}
},
yAxis: {
axisLabel: {
fontSize: isSmallScreen ? 9 : 10
}
},
legend: {
textStyle: {
fontSize: isSmallScreen ? 9 : 10
},
bottom: isSmallScreen ? 5 : 10
},
// 小屏隐藏不必要的交互元素
tooltip: {
trigger: 'axis',
// 小屏让tooltip更紧凑
extraCssText: isSmallScreen ? 'font-size:10px;' : ''
},
series: isSmallScreen ? [
// 小屏只显示主要系列，减少混乱
{ name: '系列1', type: 'line', smooth: true },
{ name: '系列2', type: 'line', smooth: true }
// 其他系列在小屏隐藏
] : option.series
};
}
真实案例：一个电商数据大屏的移动端适配
去年我给一个电商客户做移动端数据看板，需求是：在iPhone SE（4.7英寸）到iPhone 14 Pro Max（6.7英寸）的范围内，ECharts图表不能有任何裁切或遮挡。
问题现象：
- Android设备（华为P40、小米12）上，X轴时间标签被截断
- iPhone上，图表整体偏右，左侧留出大片空白
- 竖屏旋转后，图表尺寸不更新，还是横屏的尺寸
解决方案：
”`html <!DOCTYPE html>
<div id="salesChart"></div>