1. 图表容器自适应：
通过设置 resize 配置项，使得图表在容器大小发生变化时自动调整。
var option = {
resize: true,
// 其他配置...
};
2. 媒体查询：
使用 media 配置项，可以根据屏幕尺寸或设备类型应用不同的配置。
var option = {
media: [
{
query: {
maxWidth: 600
},
option: {
title: {
text: '小屏时的标题'
},
// 其他小屏时的配置...
}
},
{
query: {
minWidth: 601,
maxWidth: 1200
},
option: {
title: {
text: '中屏时的标题'
},
// 其他中屏时的配置...
}
},
// 更多媒体查询...
],
// 默认配置...
};
在上述例子中，通过媒体查询，当屏幕宽度小于等于 600px 时应用小屏时的配置，当屏幕宽度在 601px 到 1200px 之间时应用中屏时的配置。
3. 响应式 API：
ECharts 提供了 echarts.resize 方法，可以在代码中手动触发图表的重新布局和渲染。
// 手动触发图表的重新布局和渲染
echarts.resize();
4. 图表事件监听：
可以监听窗口大小变化等事件，然后在事件回调中调用 echarts.resize 方法。
// 监听窗口大小变化事件
window.addEventListener('resize', function() {
// 在回调中触发图表的重新布局和渲染
echarts.resize();
});
这样，当窗口大小变化时，图表会根据新的容器大小进行重新布局和渲染。
通过这些响应式配置选项和方法，可以使得图表在不同的屏幕尺寸和设备上都能够展示出良好的效果。根据实际需求，你可以选择使用其中的一种或组合多种方式来实现图表的响应式布局。详细的配置选项和方法可以在 [ECharts 文档](https://echarts.apache.org/zh/index.html) 中找到。
转载请注明出处：http://www.zyzy.cn/article/detail/13207/ECharts