手把手教你搞定Echarts缩放的自定义功能

2023-09-04 16:23:55

ECharts 缩放：自定义和状态保持指南

ECharts 是一款功能强大的数据可视化工具，但其默认缩放功能在某些情况下可能并不理想。通过自定义缩放功能，我们可以增强用户体验并获得更适合的视觉效果。此外，了解如何在切换缩放模式后保持缩放状态非常重要，本文将详细探讨这些主题。

自定义 ECharts 的缩放功能

ECharts 提供两种缩放模式：基于 X 轴和基于 Y 轴。通过配置以下选项，我们可以自定义缩放功能：

设置缩放范围： dataZoom.range 用于设置缩放范围。
设置缩放手柄： dataZoom.handleSize 和 dataZoom.handleIcon 分别用于设置缩放手柄的大小和图标。
设置动画效果： dataZoom.animation 用于设置缩放的动画效果。
设置触发方式： dataZoom.trigger 用于设置缩放的触发方式。
设置联动： dataZoom.link 用于设置多个图表之间的缩放联动。

代码示例：

option = {
  dataZoom: [
    {
      type: 'slider',
      show: true,
      realtime: true,
      range: [0, 100],
      handleSize: 10,
      handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.3h6.6V24.4z M13.3,19.4H6.7v-1.3h6.6V19.4z',
      animationDuration: 300,
      triggerOn: 'mousemove',
    }
  ]
};

切换缩放模式后的状态保持

切换缩放模式后，ECharts 的缩放状态默认不会保持。这可能会导致用户在切换缩放模式后需要重新设置缩放范围或缩放手柄。有两种方法可以解决这个问题：

使用 dataZoom.restore： 此选项可自动恢复缩放状态。
使用 dataZoom.save： 此选项可手动保存缩放状态，并使用 dataZoom.restore 恢复。

代码示例：

option = {
  dataZoom: [
    {
      type: 'slider',
      show: true,
      realtime: true,
      range: [0, 100],
      handleSize: 10,
      handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.3h6.6V24.4z M13.3,19.4H6.7v-1.3h6.6V19.4z',
      animationDuration: 300,
      triggerOn: 'mousemove',
      restore: true,
    }
  ]
};