echarts能否适配移动端

可以的，ECharts 完全可以适配移动端，而且官方本身就考虑了移动端场景。下面从几个方面说明如何做和注意事项：

一、ECharts 对移动端的支持情况

• ✅ 支持触摸事件（tap、pinch 缩放等）
• ✅ 支持响应式 resize
• ✅ 支持 Retina 高清屏（devicePixelRatio）
• ✅ 体积可裁剪（按需引入）

二、常见移动端适配做法

1️⃣ 容器自适应（最关键）

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

const chart = echarts.init(document.getElementById('chart'));

window.addEventListener('resize', () => {
  chart.resize();
});

在移动端，屏幕旋转、软键盘弹起都会触发 resize。

2️⃣ 初始化时指定设备像素比（可选）

const chart = echarts.init(dom, null, {
  renderer: 'canvas',
  devicePixelRatio: window.devicePixelRatio
});

不指定也行，ECharts 默认会读取 window.devicePixelRatio

3️⃣ 移动端友好的配置建议

✅ 字体 & 间距

textStyle: {
  fontSize: 12
}

✅ 关闭不必要的动画（提升性能）

animation: false

✅ 简化 tooltip

tooltip: {
  trigger: 'axis',
  confine: true // 防止溢出屏幕
}

4️⃣ 手势支持

ECharts 默认支持：

• 单指点击（tap）
• 双指缩放（部分图表）

如果是地图或折线图缩放，可结合：

• dataZoom
• 手势库（如 Hammer.js）

三、移动端性能优化建议

• 使用 Canvas（默认）
• 避免过多 series
• 大数据使用 sampling
• 使用 按需引入

import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';

四、在 Vue / React 中使用

• Vue：监听 onMounted + resize
• React：useEffect + ResizeObserver

示例（React）：

useEffect(() => {
  const chart = echarts.init(ref.current);
  const ro = new ResizeObserver(() => chart.resize());
  ro.observe(ref.current);
}, []);

五、总结

✅ ECharts 完全适配移动端
✅ 重点在：容器自适应 + resize + 配置简化
✅ 性能和体验可控

如果你有具体场景（如 H5 页面、微信小程序、Vue 移动端），我可以给你更针对性的示例。