返回

Apache ECharts 5 系列教程（3）：交互能力，让数据可视化更具吸引力

前端

在Apache ECharts 5系列教程（2）视觉设计中，我们了解到，通过在视觉设计方面的调整，我们希望能够让读者更关注图表中重要的信息。而接下来我们要介绍的多状态设计则更进一步地让读者参与交互，交互的意义不仅仅在于更加美观，更在于使得图表更加生动，易于理解。

交互基础

交互类型

ECharts 5 中提供了丰富的交互类型，包括：

  • 缩放和平移：允许用户通过鼠标或触摸屏来缩放和移动图表。
  • 数据提示：当用户将鼠标悬停在数据点或数据系列上时，显示一个包含更多信息的提示框。
  • 工具提示：当用户将鼠标悬停在图表上时，显示一个包含图表整体信息的提示框。
  • 图例交互：允许用户通过点击或取消点击图例项来显示或隐藏相应的数据系列。
  • 数据过滤：允许用户通过点击或取消点击数据点或数据系列来过滤数据。
  • 数据排序：允许用户通过点击图表中的列头来对数据进行排序。
  • 数据导出：允许用户将图表中的数据导出为图片、PDF、CSV 或其他格式。

交互事件

当用户与图表进行交互时，ECharts 5 会触发相应的交互事件。这些事件可以通过 on() 方法来监听，并通过回调函数来处理。

例如，要监听数据提示事件，可以这样写：

chart.on('dataTipShow', function (params) {
  console.log(params);
});

当用户将鼠标悬停在数据点或数据系列上时，这个回调函数就会被触发。params 参数包含了有关数据提示的信息，包括数据点的值、数据系列的名称等。

交互设计

在设计交互时，需要考虑以下几点：

  • 交互的目的：交互应该服务于图表的设计目标。例如，如果图表是为了展示数据的整体趋势，那么交互就应该允许用户缩放和平移图表。
  • 交互的类型：根据交互的目的，选择合适的交互类型。
  • 交互的时机：交互应该在用户需要的时候发生。例如，数据提示应该在用户将鼠标悬停在数据点或数据系列上时显示。
  • 交互的反馈：交互应该提供及时的反馈，让用户知道他们的操作已经生效。例如，当用户缩放或移动图表时，图表应该立即更新。

实例

以下是一些使用 ECharts 5 创建交互图表的实例：

总结

交互是数据可视化中不可或缺的一部分。它允许用户与图表进行交互，探索数据并获得更多洞察。ECharts 5 中提供了丰富的交互功能，包括缩放、平移、数据提示、工具提示、图例交互、数据过滤、数据排序和数据导出等。通过合理的交互设计，可以创建出更具吸引力和更易于理解的数据可视化。