首页 前端知识 【echarts】图表配置tooltip 的formatter,如何获取并显示返回值的其他字段,附示例

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

2024-03-10 11:03:38 前端知识 前端哥 134 655 我要收藏

这里写目录标题

    • 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}在不同图表类型下代表数据含义为:

图表类型含义
折线(区域)图、柱状(条形)图、K线图{a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
散点图(气泡)图{a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)
地图{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值都是字符串,所以我们需要做的就是字符串的拼接,回调函数的方式的优势在于处理字符串更加灵活,调用属性的方式获取想要的值,可读性更高。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3556.html
标签
评论
发布的文章

jQuery之宽高

2024-04-05 09:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!