1. 容器大小自适应： 当用户在移动设备上访问时，需要确保图表容器的大小适应不同的屏幕尺寸。
2. 触摸交互优化： 移动端上用户主要通过触摸进行交互，因此需要对触摸事件进行优化。
3. 字体大小调整： 移动端屏幕相对较小，需要适当调整图表中的字体大小，以确保在小屏幕上能够清晰显示。
下面是一个简单的示例，演示了如何在移动端使用 ECharts，并进行了一些基本的自适应配置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 移动端自适应示例</title>
<!-- 引入 ECharts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 在这里创建一个容器用于放置图表 -->
<div id="myChart" style="width: 100%; height: 300px;"></div>
<script>
// 获取屏幕宽度
var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
// 设置容器宽度和字体大小的适应性配置
var containerWidth = screenWidth > 600 ? '600px' : '100%';
var fontSize = screenWidth > 600 ? 16 : 12;
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));
// 设置容器宽度和字体大小
myChart.setOption({
title: {
text: '移动端自适应示例',
textStyle: {
fontSize: fontSize
}
},
grid: {
left: '5%',
right: '5%',
bottom: '15%',
containLabel: true
},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E'],
axisLabel: {
fontSize: fontSize
}
},
yAxis: {
axisLabel: {
fontSize: fontSize
}
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10]
}]
});
// 设置容器宽度
myChart.resize({
width: containerWidth
});
// 监听窗口大小变化，实时调整容器大小
window.addEventListener('resize', function () {
screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
containerWidth = screenWidth > 600 ? '600px' : '100%';
fontSize = screenWidth > 600 ? 16 : 12;
myChart.resize({
width: containerWidth
});
// 根据屏幕宽度动态调整字体大小
myChart.setOption({
title: {
textStyle: {
fontSize: fontSize
}
},
xAxis: {
axisLabel: {
fontSize: fontSize
}
},
yAxis: {
axisLabel: {
fontSize: fontSize
}
}
});
});
</script>
</body>
</html>
在这个示例中，通过使用 window.innerWidth 获取屏幕宽度，并根据屏幕宽度动态调整容器宽度和字体大小。同时，通过监听窗口大小变化事件，实时调整图表容器的大小，以实现在移动端的自适应。这只是一个简单的示例，实际中可能需要根据具体情况进行更复杂的适配工作。
转载请注明出处：http://www.zyzy.cn/article/detail/5064/ECharts