如何实现 ECharts 热力图的自适应布局？

ECharts 的热力图（Heatmap）可以通过设置 `heatmap` 组件的属性来实现自适应布局。以下是关键步骤：

1. **数据格式**：首先，你需要准备一个二维数组作为数据源，其中每个元素代表一个网格单元的颜色值。

2. **配置项**：在 ECharts 配置对象中，找到 `heatmap` 部分。设置 `radius` 属性来控制节点半径，如果希望节点大小随数据变化而调整，可以将其设为百分比或者使用动态计算的方式。

   {
     heatmap: {
       radius: '50%', // 使用百分比自动调整
       // 或者
       radius: function(value) { return value / 10; }, // 动态计算
       data: yourDataArray,
     },
   }

3. **尺寸自适应**：通过调整容器的宽度和高度，可以让图表适应屏幕大小。你可以监听窗口大小改变事件，然后实时更新图表的尺寸。

4. **填充模式**：设置 `filler` 属性，可以根据数据填充空白区域，这有助于保持整体视觉效果的均衡。

   {
     heatmap: {
       filler: {
         type: 'density', // 例如使用密度填充
       },
     },
   }

5. **视口缩放**：开启 `resize` 参数可以使图表在窗口大小变化时自动调整比例，保持图表内容清晰。

   echarts.init(dom).setOption({
     resize: true,
     heatmap: ...,
   });

记得在实际操作中，初始化 ECharts 并将这个配置应用到你的 DOM 元素上：

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