EnlightenCode

ECharts treemap 树形图的滚动实现方案 ​

问题背景 ​

在使用 ECharts treemap 树形图时，需要实现水平滚动的交互效果。本文将介绍几种尝试方案及最终解决方案。

方案一：roam 属性（不推荐） ​

首先尝试使用 ECharts 内置的 roam 属性：

js
const option = {
  series: [{
    type: 'treemap',
    roam: true, // 启用缩放和平移
    // ... 其他配置
  }]
}

roam 属性可选值：

  • false: 禁用缩放和平移
  • 'scale'/'zoom': 只启用缩放
  • 'move'/'pan': 只启用平移
  • true: 同时启用缩放和平移

存在的问题 ​

使用 roam 属性存在以下问题：

  1. 平移效果生硬，用户体验不佳
  2. 可以任意方向移动，不符合只需水平滚动的需求
  3. 缺乏滚动条视觉反馈

方案二：dataZoom 尝试（不可行） ​

尝试使用 dataZoom 组件实现滚动，但由于 treemap 没有 x/y 轴，该方案不可行。

最终方案：CSS 实现（推荐） ​

使用原生 CSS 的 overflow 属性实现水平滚动，简单高效：

css
.chart-container {
  width: 100%;  /* 容器宽度 */
  overflow-x: auto;  /* 启用水平滚动 */
  overflow-y: hidden;  /* 禁用垂直滚动 */
}

.chart {
  width: 150%;  /* 图表宽度大于容器 */
  min-width: 800px;  /* 最小宽度，防止内容过于拥挤 */
}

优点 ​

  1. 实现简单，代码量少
  2. 原生滚动体验流畅
  3. 显示标准滚动条，提供良好的视觉反馈
  4. 仅允许水平方向滚动

总结 ​

在 ECharts treemap 实现水平滚动时，原生 CSS 方案比 ECharts 内置的 roam 属性更适合，既保证了良好的用户体验，又简化了实现方式。

参考资料 ​