<think>我们参考用户提供的引用和问题，用户想要查询在 ECharts 中当 tooltip 的 trigger 为 'item' 时，formatter 的写法。 根据引用[2]中的示例，当 trigger 为 'item' 时，formatter 可以是一个函数，该函数的参数 params 包含了当前数据项的信息。 引用[2]的代码示例： tooltip: { trigger: 'item', formatter: function (params) { return params.data.name + "市&lt;br/&gt;跨境网络零售:" + params.data.value[2] + "亿元"; } } 另外，引用[3]也提到了当需要异步加载数据时，可以使用带有三个参数（params, ticket, callback）的回调函数形式。但用户目前没有提到异步，所以先提供基本写法。 同时，引用[4]提到了自定义tooltip的内容和样式，可以利用formatter函数返回HTML字符串来实现更复杂的样式。 所以，针对用户当前的问题：tooltip的trigger为'item'时formatter的写法，我们可以总结如下： 1. formatter 可以是一个字符串模板，也可以是一个回调函数。 2. 当需要根据数据项动态生成提示框内容时，通常使用回调函数。 在回调函数中，params 参数是一个对象，代表当前数据项。对于不同的图表类型，params 中包含的数据结构可能不同。通常在 trigger 为 'item' 时，params.data 就是该数据项的数据（可能是数组，也可能是对象，具体取决于图表系列的数据类型）。 例如，在饼图中，params.data 通常是一个包含 name 和 value 的对象或数组（如果数据项是数组，那么第一个元素通常是 name，第二个是 value）。在折线图或散点图中，可能数据项是一个数组，包含多个维度的值。 因此，在编写 formatter 函数时，需要根据图表类型和数据结构来访问具体的属性。 下面给出一个通用的示例，展示当 trigger 为 'item' 时 formatter 的写法： ```javascript tooltip: { trigger: 'item', // 触发类型为数据项图形触发 formatter: function (params) { // 这里根据图表类型和数据格式，从params中获取需要的数据 // 例如，饼图中：params.name 和 params.value // 折线图或散点图中：params.data 可能是一个数组，比如 [x, y, z] // 我们可以使用params.data来获取原始数据项 // 也可以用params.value，它等价于params.data（在一些图表类型中） // 此外，params.color可以获取图元的颜色 // 假设数据项是一个数组，比如[类目, 数值1, 数值2, ...] // 我们只取需要的数据 // 返回一个HTML字符串，支持使用<br/>换行，也可以使用样式 // 例如：返回数据项名称和第一个值 return params.name + ': ' + params.data[0]; } } ``` 如果用户需要更复杂的样式，可以在返回的字符串中使用HTML标签，并设置内联样式。例如： ```javascript tooltip: { trigger: 'item', formatter: function (params) { return `<div style="border: 1px solid #ccc; padding: 10px; background-color: #fff;"> <div style="font-weight: bold;">${params.name}</div> <div>数值：${params.value}</div> </div>`; } } ``` 注意：由于 ECharts 的 tooltip 是使用 CSS 样式控制的，我们可以通过 formatter 返回的 HTML 字符串来设置样式。 另外，如果数据项是对象形式（如 {name: '北京', value: 100}），那么可以直接使用 params.data.name 和 params.data.value。 具体的数据结构需要根据图表系列（series）中定义的数据格式来确定。 因此，用户需要根据自己的数据格式调整 formatter 函数中的内容。 最后，我们还可以参考 ECharts 官方文档中关于 tooltip.formatter 的说明。 </think> 在 ECharts 中，当 `tooltip.trigger` 设置为 `'item'` 时，表示提示框会由**数据项**触发（如饼图的扇形、折线图的点）。以下是详细的 `formatter` 写法指南： ### 一、基本写法（字符串模板） 当数据项为简单数据时，可直接使用字符串模板： ```javascript tooltip: { trigger: 'item', formatter: '{a}<br/>{b}: {c}万元' // 模板变量 } ``` - `{a}`: 系列名称（series.name） - `{b}`: 数据项名称（dataItem.name） - `{c}`: 数据值（dataItem.value） - 其他变量：`{d}`（饼图百分比）等[^2] > **示例效果**： >  ### 二、回调函数写法（动态内容） 需复杂逻辑或异步数据时，使用函数形式： ```javascript tooltip: { trigger: 'item', formatter: function(params) { // params 是当前数据项对象 return ` <div style="border:1px solid #ccc;padding:10px"> <strong>${params.name}</strong><br/> 销售额: ${params.value} 万元<br/> 占比: ${params.percent}% </div> `; } } ``` #### 关键参数详解： | 参数属性 | 说明 | |---------|------| | `params.name` | 数据项名称（如城市名） | | `params.value` | 原始数值（可数组如`[12, 20]`） | | `params.percent` | 饼图占比百分比 | | `params.color` | 图元颜色（支持`style`内联） | | `params.dataIndex` | 数据索引 | > **异步数据示例**（引用[3]扩展）： > ```javascript > formatter: function(params, ticket, callback) { > fetchData(params.name).then(data => { > callback(ticket, `<b>${params.name}</b><br/>详情: ${data}`); > }); > return "加载中..."; // 临时显示 > } > ``` ### 三、自定义样式技巧 1. **HTML 内联样式**（支持富文本）： ```javascript formatter: (params) => { return `<span style="color:${params.color};font-weight:bold"> ${params.name} </span><br/> <i>值: ${params.value}</i>`; } ``` 2. **条件渲染**： ```javascript formatter: (params) => { if (params.dataIndex === 0) { return "核心数据: " + params.value; } return params.name + ": " + params.value; } ``` ### 四、常见场景处理 | 图表类型 | 数据项结构 | 典型 formatter 写法 | |---------------|---------------------|-------------------------------------| | 饼图（Pie） | `{value: 25, name: '北京'}` | `'{b}: {c} ({d}%)'` | | 柱状图（Bar） | `['北京', 120]` | `function(p){return p.value[1]}` | | 散点图（Scatter）| `[12.3, 45.6, 7.8]` | `function(p){return `${p.value.slice(0,2).join()}`}` | > ⚠️ **注意**：`renderMode: 'richText'` 需启用才能支持复杂 HTML 样式[^4]。 ### 五、调试建议 1. 打印完整参数结构： ```javascript formatter: (params) => { console.log(JSON.stringify(params)); return params.name; } ``` 2. 使用 ECharts 官方工具：[Apache ECharts 在线构建器](https://echarts.apache.org/examples/zh/editor.html) ---