### ECharts Formatter 使用方法 在 ECharts 中，`formatter` 是用于自定义提示框 (`tooltip`) 或图例 (`legend`) 显示内容的强大工具。通过 `formatter` 可以灵活控制显示的信息格式。 #### 基本用法 为了使用 `formatter` ，可以在相应的配置项中设置它。例如，在 `tooltip` 和 `legend` 组件里都可以应用此功能[^2]： ```javascript var option = { tooltip: { trigger: 'axis', formatter: function (params) { var result = ''; params.forEach(function(item){ result += item.seriesName + ': ' + item.value + '<br/>'; }); return result; } }, }; ``` 这段代码展示了如何遍历多个系列的数据并构建自定义的提示信息。 #### 加入 HTML 标签 除了纯文本外，还可以利用HTML标签来增强视觉效果。下面的例子说明了怎样让某些部分的文字变红[^3]: ```javascript tooltip: { formatter: function () { return '<a style="color:red">红色文字</a>'; } } ``` 这使得开发者能够更加精细地调整提示框内的样式[^1]。 #### 实际案例展示 考虑一个更复杂的场景——当鼠标悬停在一个柱状图上时，不仅显示出具体数值，还附带了一个指向外部链接的小图标。这里给出完整的实现方式[^4]： ```javascript option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] }, yAxis: { type: 'value' }, series: [{ name: '销量', type: 'bar', data: [10, 52, 20], label: { show: true, position: 'top', formatter: '{b}\n{c}' }, markPoint: { symbolSize: 80, data: [ {type: 'max', name: '最大值'} ] }, tooltip: { trigger: 'item', formatter: function(params){ let linkIcon = `<img src='https://example.com/link-icon.png' width='16px'>`; return `${linkIcon} ${params.name}<br/> 销量 : ${params.value}`; } } }] }; ``` 上述例子中，每当用户将光标移到某个条形上方时，就会看到带有超链接图标的额外信息以及该天的具体销售数量。