Echarts 鼠标悬浮事件处理：formatter与callback的使用

"ECharts 使用 formatter 修改鼠标悬浮提示信息详解" 在 ECharts 图表库中，`formatter` 是一个非常重要的属性，它允许我们自定义图表中的各种格式化信息，包括鼠标悬浮时显示的 tooltip（提示框）内容。本篇文章将详细讲解如何利用 `formatter` 函数来修改扇形图（pie chart）的悬浮事件信息。 首先，`formatter` 通常是一个字符串模板或一个回调函数。在回调函数中，我们可以根据需求动态生成提示信息。在提供的描述中，`formatter` 被定义为一个函数，它接收三个参数：`params`、`ticket` 和 `callback`。 1. `params`：这是一个对象，包含了当前触发事件的系列（series）、数据项（data item）以及坐标等信息。例如，对于扇形图，`params` 可能包含 `seriesIndex`（系列索引）、`dataIndex`（数据项索引）、`name`（数据项名称）、`value`（数据值）等属性。 2. `ticket`：这个参数在 ECharts 内部用于异步处理，一般在复杂的格式化场景中使用。在这个例子中，`ticket` 被用来判断不同的扇形部分，以便显示不同的信息。 3. `callback`：这个函数用于更新格式化的结果，一般在异步处理完成后调用，传入最终的格式化后的字符串。 在给出的代码中，`formatter` 函数通过 `ticket` 来识别不同的扇形部分，然后根据 `ticket` 的值来决定显示哪个模块的详细信息。例如： - 当 `ticket` 为 `'item_操作概况_0'` 时，代码会遍历 `data.mustMod` 数组，展示每个模块的名称、总数和百分比。 - 当 `ticket` 为 `'item_操作概况_1'` 时，它会处理 `data.moreMod` 数组，显示对应的模块信息。 - 当 `ticket` 为 `'item_操作概况_3'` 时，处理 `data.lessMod` 数组，显示剩余模块的信息。 `str` 变量被用来存储构建好的字符串，其中 `<br/>` 用于换行，使得信息更易读。在遍历数组的过程中，使用 `for...in` 循环获取每个对象的 `MODULE_NAME`、`TOTAL` 和 `precentAcccess` 属性，并格式化成我们需要的样式。 总结来说，ECharts 中的 `formatter` 提供了强大的自定义能力，可以根据实际需求格式化图表的任何文本信息，如 tooltip 内容、图例文本等。通过灵活运用 `formatter` 函数，可以实现丰富的交互体验和视觉呈现。在实际开发中，如果数据是 JSON 数组格式，可以通过 `params.data` 直接访问，简化 `ticket` 的判断逻辑，使代码更加简洁。