『Echarts』弹窗组件和数据标记

一、前言

本篇文章是『Echarts』文章的第 5 篇，主要介绍『Echarts』弹窗组件和数据标记

在先前的学习中，我们已经建立了对「ECharts」工具箱组件的基础理解。随着我们对其应用日益熟练，现在正是深入研究 ECharts 提示框组件和数据标注功能的绝佳时机，这将使我们能够更加高效地展现和分析数据。

二、弹窗组件（tooltip）

在数据可视化领域，提示框组件扮演着至关重要的互动角色。当鼠标悬浮于图标之上时，它可以展示该数据点的具体细节。然而，我们目前使用的 ECharts 图表中，鼠标悬停并未触发任何响应。为了改善用户体验，我们需要为这些图表加入相应的提示框功能。

要为图表添加提示框组件，我们需要在 option 中的 tooltip 属性中进行配置。下面是一个简单的示例：

option = {
    tooltip: {
        show: true
    },
    // ...
}

在这个例子中，通过将 show 属性设置为 true，我们启用了提示框组件的可见性。反之，如果将这一属性值更改为 false，则能在选定场景中使提示框保持不可见。完成这些基本配置后，系统默认会在鼠标悬停于数据点上时显示与之相关联的坐标轴信息（axis item）。

演示效果

本例演示了 ECharts 提示框组件（Tooltip）的基础配置方法。通过设置 tooltip.show 属性为 true，可使提示框显示默认文案。为了精细控制提示框的触发条件，我们引入了 tooltip.trigger 属性。

在 ECharts 中，默认情况下 tooltip.trigger 设置为 item，此时鼠标悬停至图表的数据点上，将触发并显示该数据点对应的提示框信息。若将 tooltip.trigger 设置为 axis，触发机制则有所不同，提示框将在鼠标悬停在坐标轴上时展示，此时与悬停点对应的所有数据点信息会在同一提示框内同时显示。

option = {
    tooltip: {
        show: true,
+       trigger: 'axis'
    },
    // ...
}

演示效果

这里来做一个小结：

• show：是否显示提示框组件
• trigger：配置显示方式，我这里配置的是 axis，表示在 X 轴上显示

至此，我们已概述了弹窗组件的一些基础配置方法。实际上，ECharts 的弹窗组件包含更多可定制选项，您可以参考官方文档：ECharts - Tooltip，以根据个人需求进行深度配置。本次介绍的是一些常用并简单的设置，供快速上手使用。

三、数据标记（markLine、markPoint）

在数据可视化领域，数据标记是一项关键技术，它极大地促进了我们对数据分布特征及数据点相互关系的直观理解。具体到 ECharts，它支持两类标记方式：markLine 和 markPoint，分别用于标示趋势线和特定数据点，以加强数据表征的清晰度和解释性。

数据标记功能允许我们突出展示若干特殊数据点——如最大值、最小值和平均值等关键统计指标。接下来，让我们具体探讨如何有效应用 markLine 和 markPoint 这两个属性以达到此目的。

3.1 markPoint(标记点)

markPoint 属性专门用来标注重要的数据点，例如：最大值、最小值和平均值等。以下是一个使用 markPoint 的简明示例：

option = {
    // ...
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line',
+       markPoint: {
+           data: [
+               {type: 'max', name: '最大值'},
+               {type: 'min', name: '最小值'}
+           ]
+       }
    }]
}

在此示例中，我们对 series 配置项中的 markPoint 属性进行了设置，标记出了两个关键数据点：最大值与最小值。图表将通过醒目的标志来展现这两个点，帮助用户迅速辨识。

目前为某一数据系列独立配置了 markPoint。为了查看配置效果，您可在网页浏览器中运行并观察结果。

演示效果图

3.2 markLine(标记线)

markLine 属性是一个强大的功能，用于在图表上添加关键指标线，从而突出显示数据的特定趋势和统计意义，比如平均值、中位数或自定义的重要数值。这个属性让图表更加直观和有说服力。下面，我们将展示一个 markLine 的简洁示例代码，快速掌握如何在图表中添加和自定义趋势线：

option = {
    // ...
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line',
+       markLine: {
+           data: [
+               {type: 'max', name: '最大值'},
+               {type: 'min', name: '最小值'},
+               {type: 'average', name: '平均值'}
+           ]
+       }
    }]
}

在本示例里，我们精心配置了 series 项下的 markLine 属性，以突出显示图表中的三个关键数据指标：最大值、最小值和平均值。这三条标注线将以显眼的方式呈现，使得用户能够一眼识别并理解数据的关键趋势。

为直观展现上述配置的效果，请参阅下面的效果图：

演示效果图

如需探索更多相关细节和高级功能，您可以参考官方文档以获取全面的指导。在此，我将仅介绍那些在工作实践中经常用到的 markLine 配置项。

最后，感谢您对本文的阅读。如果这篇文章对您有所帮助，欢迎点赞、收藏或转发分享。您的每一份支持，都是我持续创作、分享知识热情的源泉。希望我们可以通过不断的学习和交流，一起进步，共享知识的乐趣。

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！