【echarts】tooltip悬浮方式-CFANZ编程社区

最近做一个需求，要求echarts折线图有三条折线，且悬浮时显示三条折线的信息，每条折线有两条信息需要显示。看了下Echarts官网，对tooltip的trigger和formatter做了以下尝试：

https://echarts.apache.org/zh/option.html#tooltip.trigger
https://echarts.apache.org/zh/option.html#tooltip.formatter

formatter是提示框浮层内容格式器，支持字符串模板和回调函数两种形式。

1. trigger: ‘axis’

之前做过的需求只是显示每条折线的一个信息，所以直接trigger: ‘axis’ 即可，代码和效果如下：

myChart.setOption({
...
	tooltip: {
	  trigger: 'axis'
	}
...
})

在这里插入图片描述

2. formatter采用字符串模板，trigger: ‘axis’

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
在trgger为axis时，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。
不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。其中变量{a}, {b}, {c}, {d}在折线图代表数据含义为：（详情见Echarts formatter官网文档）

折线图：{a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

tooltip: {
  trigger: 'axis',
  formatter: '{b0}: {c0}<br />{b1}: {c1} <br/> {b2} : {c2}'
}

示例中的formatter表示 “类目：数值”
在这里插入图片描述

3. formatter采用字符串模板，trigger: ‘item’

trigger为item，鼠标在某一项悬浮才会有悬浮框，所以只有一条折线的值；
所以formatter多写几个b, c都白搭，多写的没有值。

tooltip: {
  trigger: 'item',
  formatter: '{b0}: {c0}'
}

在这里插入图片描述

4. formatter采用回调函数，trigger: ‘item’

可以显示一条线的多个信息，回调函数中params的属性要对应series.data的属性值。可以在回调函数中加debugger看params的值。

totalComplaint.push({ name: '新增总投诉量', value: item.total || 0, percentage: '100%' });

tooltip: {
 trigger: 'item',
  formatter: function (params) {
    return params.data.name + '：' + params.data.value +
    '</br>' + '占比：' + params.data.percentage
  }
},
series: [
          {
            name: '新增总投诉量',
            type: 'line',
            smooth: true,
            data: totalComplaint,
            lineStyle: {
              width: 4
            }
          },
          {
            name: '新增总发帖投诉量',
            type: 'line',
            smooth: true,
            data: postComplaint
          },
          {
            name: '新增总回帖投诉量',
            type: 'line',
            smooth: true,
            data: commentComplaint
          }
        ]

在这里插入图片描述

5. formatter采用回调函数，trigger: ‘axis’

嘤嘤嘤但是我的需求是坐标轴触发悬浮框，且显示三条线的各自的两个信息。把我吃了吧：）
官网这么说的：参数有三个，支持返回 HTML 字符串或者创建的 DOM 实例

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

示例：试了一下，还行不麻烦，圆圈就用的css调的，对应每条线的颜色。芜湖舒服了~~

tooltip: {
 trigger: 'axis',
  formatter: function (params) {
    return params[0].axisValue + '</br>' +
    '<i style="width:0.8rem; height:0.8rem; margin-right:0.2rem; border-radius:50%; background-color:#F49495; display:inline-block"></i>' +
    params[0].data.name + '：' + params[0].data.value + '，占比：' + params[0].data.percentage + '</br>' +
    '<i style="width:0.8rem; height:0.8rem; margin-right:0.2rem; border-radius:50%; background-color:#9ED4EB; display:inline-block"></i>' +
    params[1].data.name + '：' + params[1].data.value + '，占比：' + params[1].data.percentage + '</br>' +
    '<i style="width:0.8rem; height:0.8rem; margin-right:0.2rem; border-radius:50%; background-color:#F8D88A; display:inline-block"></i>' +
    params[2].data.name + '：' + params[2].data.value + '，占比：' + params[2].data.percentage + '</br>'
  }
}

在这里插入图片描述