【echarts】图表配置tooltip 的formatter，如何获取并显示返回值的其他字段，附示例

这里写目录标题

• • tooltip是什么？
  • formatter 怎么配置?
  • • ①字符串模板
    • 字符串模板示例：
    • ②回调函数
    • 回调函数示例：

tooltip是什么？

tooltip为提示框组件，实际上就是鼠标移到图表上后展示的类似数据点详情的一个说明。
在options配置项处于第一级目录，tooltip与series，xAxis，yAxis同级。

formatter 怎么配置?

官方文档：https://echarts.apache.org/zh/option.html#tooltip.formatter
formatter有两种配置方式：①字符串模板 ②回调函数

①字符串模板

formatter: '{b0}: {c0}<br />{b1}: {c1}'复制

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。

其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

总结：字符串模板自由度比较低，需要根据既定的几个模板变量例如 {a},
{b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等去做拼接来展示，只能展示显示的图表看到的数据，若涉及到除横纵坐标其他隐藏数据字段的展示，字符串模板便无能为力了。

字符串模板示例：

效果：

代码：

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis',
    formatter: "类目值：{b0}<br/> {a0}:{c0}封 <br/>{a1}:{c1}个 <br/>{a2}:{c2}条"
},
  legend: {
    data: ['Email', 'Direct', 'Search Engine']
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};复制

②回调函数

回调函数格式：

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]复制

回调函数情况稍有些复杂，我们直接从示例开始看，注意示例的注释。

回调函数示例：

 
let res = [ // 接口数据返回格式
{
  "num":1,
  "supplyTime": 34,
  "supplySort": "1",
  "podCode": "X0005",
  "startTime": "2023-01-14 05:54:44",
},
{
  "num":2,
  "supplyTime": 28,
  "supplySort": "1",
  "podCode": "X005",
  "startTime": "2023-01-14 09:54:44",
},
{
  "num":3,
  "supplyTime": 17,
  "supplySort": "1",
  "podCode": "X000",
  "startTime": "2023-01-14 08:54:44",
},
{
  "num":4,
  "supplyTime": 2,
  "supplySort": "1",
  "podCode": "X035",
  "startTime": "2023-01-14 09:54:44",
},
{
  "num":5,
  "supplyTime": 26,
  "supplySort": "1",
  "podCode": "0035",
  "startTime": "2023-01-14 19:54:44",
},
]
 
option = {
    tooltip: {
      formatter: (params) => {
        // 打印确认params是对象还是数组
        console.log(params)
        // 对象：取鼠标悬浮当前项索引params.dataIndex
        // 数组：取鼠标悬浮当前项索引params[0].dataIndex
        let index = params.dataIndex 
        let obj = res[index] // 通过索引取当前项完整的接口返回值
        let str = `出发顺序：${obj.supplySort}<br/>
			        仓位码：${obj.podCode}<br/>
			        任务生成时间：${obj.startTime}<br/>`
        return str
    }
  },
xAxis: {
  type: 'category',
  data: res.map(i => {return i.num})
},
yAxis: {
  type: 'value'
},
series: [
  {
    data: res.map(i => {return i.supplyTime}),
    type: 'bar',
  }
]
}复制

上面第一个参数 params 是 formatter 需要的数据集，也就是我们鼠标悬浮当前柱的一些数据，我们打印出来看下里面哪些可以用的上：

通过打印可以看到，params只有横纵坐标轴的值，以及颜色等数据，并没有我们要展示的出发顺序、仓位码等数据。但是我们可以拿到当前项的索引dataIndex，有了索引params.dataIndex加上接口返回值res便可以直接获取当前柱的整个对象，即res[params.dataIndex]。这里要注意的是需先判断params打印出来是对象还是数组，上面我们示例中是个对象，如果是数组时索引为params[0].dataIndex。

说到底，无论是哪种方式，最终formatter的return值都是字符串，所以我们需要做的就是字符串的拼接，回调函数的方式的优势在于处理字符串更加灵活，调用属性的方式获取想要的值，可读性更高。