ECharts是否支持响应式布局？如何进行自适应绘制？

是的，ECharts支持响应式布局，并提供了多种方法来实现图表的自适应绘制。

1. 使用resize()方法：在页面的布局发生变化时（如窗口大小调整），调用ECharts实例的resize()方法可以触发图表的重新绘制，使其适应新的容器大小。

// 获取ECharts实例
var myChart = echarts.init(document.getElementById('chart'));

// 在窗口大小发生变化时调用resize()方法
window.addEventListener('resize', function () {
  myChart.resize();
});

2. 使用setOption()方法并设置responsive属性：通过设置图表的responsive:true属性，可以使图表根据容器大小自动调整尺寸。同时，可以使用baseOption和media属性结合来定义不同的响应式规则。

// 获取ECharts实例
var myChart = echarts.init(document.getElementById('chart'));

// 设置图表的responsive属性和baseOption和media属性
myChart.setOption({
  // 基本配置项
  responsive: true,
  baseOption: {
    // 图表的基本配置
    // ...
  },
  media: [
    {
      query: {
        maxWidth: 600
      },
      option: {
        // 定义小屏幕下的配置
        // ...
      }
    },
    {
      query: {
        minWidth: 601,
        maxWidth: 1200
      },
      option: {
        // 定义中屏幕下的配置
        // ...
      }
    },
    {
      query: {
        minWidth: 1201
      },
      option: {
        // 定义大屏幕下的配置
        // ...
      }
    }
  ]
});

在上述示例中，通过设置responsive:true，图表将根据容器的大小自动调整，并且可以使用baseOption来定义基本的配置项，然后使用media来定义不同屏幕尺寸下的特定配置项。

3. 使用CSS样式控制容器大小：可以通过设置CSS样式来控制ECharts容器的大小，使其随着布局的变化而自适应。

#chart {
  width: 100%;
  height: 100%;
}

通过设置#chart元素的宽度和高度为100%，可以使图表容器与其父容器等宽等高，从而实现自适应的效果。

以上是ECharts实现图表响应式布局的主要方法，通过调用resize()方法、设置responsive属性或使用CSS样式，可以实现图表在不同设备和窗口大小下的适应性展示。