Echarts的formatter用法

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

介绍

formatter 是ECharts 的一个配置项，允许图表的组件（如坐标轴标签、提示框（tooltip）内容、图例标签等）显示高度定制化、可以动态变化的内容。

基本用法

formatter 的值可以是一个字符串模板，也可以是一个回调函数。

字符串模板

字符串模版允许使用预定义的变量插入数据，使用标准占位符来表示变量：{a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的{a}，{b}，{c}，{d}含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

折线（区域）图、柱状（条形）图、K线图 :{a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

比如将数值轴上的数字格式化为带有单位的字符串：

yAxis: {  
    type: 'value',  
    axisLabel: {  
        formatter: '{value} 元'  
    }  
}

回调函数

回调函数接收一个或多个参数，这些参数包含了当前数据点的信息，你可以根据这些信息来构造返回的字符串。

(params: 
	Object|Array, 
	ticket: string, 
	callback: (ticket: string, html: string)
) => string

参数：

• params: Object|Array包含了当前数据点的详细信息，包括值（value）、系列名称（seriesName）、类目值（name或category）等，在每一个配置项中表示不同内容，可以打印看看。
• ticket: string不进行异步操作（如从服务器获取数据），可以忽略这个参数。
• callback: (ticket: string, html: string) => void这个回调函数允许你在异步操作完成后，将生成的HTML内容或字符串返回给ECharts进行显示。

返回值是一个用来表示显示内容的字符串。

示例1：

假设你想要根据数据点的值来显示不同的文本：

formatter: function (params) {  
    return params.name + ': ' + params.value + ' 个';  
}

formatter函数接收对象包含了当前数据点的name和value属性。函数返回一个字符串用于在提示框中显示。

实例2:

假设我们有一个柱状图，需要在提示框里显示这一列所有的具体数值和百分比：

tooltip: {  
    trigger: 'axis',  
    formatter: function (params) {  
        // params 是一个数组，包含了每个数据点的信息  
        let res = params.map(item => {  
            return `${item.seriesName}<br/>${item.name}: ${item.value} (${item.percent}%)`;  
        });  
        return res.join('<br>');  
    }  
}

实例3:

使用回调函数来根据数值大小改变颜色：

yAxis: {  
    type: 'value',  
    axisLabel: {  
        formatter: function (value) {  
            if (value > 1000) {  
                return `${value} 元 <span style="color:red;">（高）</span>`;  
            } else {  
                return `${value} 元 <span style="color:green;">（低）</span>`;  
            }  
        }  
    }  
}

注意：

1. 虽然 HTML 标签在 ECharts 的某些地方（如 tooltip）是支持的，但在 axisLabel 中直接插入 HTML 可能不会被渲染，这取决于 ECharts 的版本和配置。
2. 用字符串写的html元素使用样式时只能用style，用class识别不了

实例4:
展示一个较为复杂的提示框：

      const dataDisplay = card.map((item: any, index: number) => {
        const text = textStyle('#222', '400', 12)
        const colorDiv = `<div style="${itemStyle(120, 0)}"><span style="${textStyle(lineColor[index], '800', 18)}">◼︎</span><span style="${text}">${item.title}<span></div>`
        const dataDiv = `<div style="${itemStyle(66, 0)}${text}backgroundColor:${lineColor[index]};">${params[index].data}${item.unit}</div>`
        const ringDiv = `<div style="${itemStyle(66, 0)}">${showMetric(rate)}</div>`
        const yearRingDiv = `<div style="${itemStyle(66, 0)}">${showMetric(yearRate)}</div>`
        return `<div style="display:flex;">${colorDiv + dataDiv + ringDiv + yearRingDiv}</div>`
      }).join('')
      return titleDisplay + tableDisplay + dataDisplay