echarts------tooltip formatter使用方法

Posted 2023-03-02

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

1. 字符串模板

模板变量有 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（百分比）

formatter:'b0: c0<br />b1: c1'

2. 回调函数

回调函数格式：

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

支持返回 HTML 字符串或者创建的 DOM 实例。

第一个参数 params 是 formatter 需要的数据集。格式如下：



componentType:'series',

// 系列类型

seriesType: string,

// 系列在传入的 option.series 中的 index

seriesIndex: number,

// 系列名称

seriesName: string,

// 数据名，类目名

name: string,

// 数据在传入的 data 数组中的 index

dataIndex: number,

// 传入的原始数据项

data:Object,

// 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）

value: number|Array|Object,

// 坐标轴 encode 映射信息，

// key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）

// value 必然为数组，不会为 null/undefied，表示 dimension index 。

// 其内容如：

//

//    x: [2] // dimension index 为 2 的数据映射到 x 轴

//    y: [0]

 // dimension index 为 0 的数据映射到 y 轴

//

encode:Object,

// 维度名列表

dimensionNames:Array,

// 数据的维度

 index，如 0 或 1 或 2 ...

// 仅在雷达图中使用。

dimensionIndex: number,

// 数据图形的颜色

color: string,

// 饼图的百分比

percent: number,



详情见 (echarts------tool--formatter)