ECharts 响应式设计详解
ECharts 支持两种主要方式实现响应式（自适应不同屏幕尺寸）：
- 容器尺寸变化自适应：最常用，通过
myChart.resize()手动或自动调整图表大小。 - 媒体查询（Media Query）：类似 CSS @media，针对不同屏幕宽度自动切换 option 配置（如调整图例方向、饼图半径、标题位置等）。
1. 容器自适应（基础响应式）
- DOM 容器设置
width: 100%; height: 100%或固定高度 + 宽度 100%。 - 监听窗口 resize 事件，调用
resize()。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>ECharts 容器响应式</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<style>
#main { width: 100%; height: 600px; } /* 宽度100%，高度固定或vh */
</style>
</head>
<body>
<div id="main"></div>
<script>
const myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: { text: '响应式柱状图' },
xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
yAxis: {},
series: [{ type: 'bar', data: [10, 20, 30, 40, 50] }]
});
// 窗口变化时自动调整
window.addEventListener('resize', () => {
myChart.resize();
});
</script>
</body>
</html>在 Vue/React 等框架中，也可在组件 resize 时调用 chart.resize()。
2. 媒体查询（Media Query）高级响应式
使用 baseOption + media 数组，根据屏幕宽度（maxWidth/minWidth 等）切换配置。
完整示例（小屏幕时图例垂直、饼图变小）：
const option = {
baseOption: {
title: { text: '响应式饼图' },
legend: { orient: 'horizontal', left: 'center' },
series: [{
type: 'pie',
radius: '60%',
center: ['50%', '50%'],
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' }
]
}]
},
media: [
{
query: { maxWidth: 600 }, // 小于等于600px（手机）
option: {
legend: { orient: 'vertical', left: 'left', top: 'center' },
series: [{ radius: '50%', center: ['50%', '50%'] }]
}
},
{
option: { // 默认大屏幕配置（可选）
legend: { orient: 'horizontal' },
series: [{ radius: '70%' }]
}
}
]
};
myChart.setOption(option);注意：
- media 中的 option 是“原子”配置，只覆盖指定项。
- 推荐结合
resize()使用，实现完美响应式。 - query 支持 maxWidth、minWidth、maxHeight 等。
官方文档（最新版）：
- 响应式容器：https://echarts.apache.org/handbook/zh/concepts/chart-size/
- Media Query：https://echarts.apache.org/zh/option.html#media
如果你需要特定场景（如移动端折叠图例、多图联动响应式）的完整代码，告诉我，我可以进一步定制！
