通用项配置tooltip(提示框组件)
触发类型(trigger)
item类型
数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
tooltip:{
trigger:'item'
},
语文成绩这几个字是y轴数据的name属性
axis类型
坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
区别:
item必须将鼠标放入数据条内部才会显示提示框。
axis只需要将鼠标放到每个数据条的轴线上都可以显示
none类型
什么都不触发
触发时机(triggerOn)
mousemove类型
鼠标移动时触发。
click类型
鼠标点击时触发。
mousemove|click类型
鼠标移动或点击时触发。
none类型
- 不在
'mousemove'
或'click'
时触发,用户可以通过 action.tooltip.showTip 和 action.tooltip.hideTip 来手动触发和隐藏。也可以通过 axisPointer.handle 来触发或隐藏。
该属性为 ECharts 3.0 中新加。
格式化(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}
(百分比)
这些其实就是用字母变量来代替每个不同图中的信息,我们不同数据肯定需要显示不同的响应信息,不可能将信息写死,比如张三和李四名字不同成绩不同,我们只能用字母来代替当前圆柱代表的信息。
tooltip: {
//trigger:'item'
trigger: 'axis',
triggerOn: 'mousemove|click',
formatter: '个人{a} <br/> {b} :{c}'
},
formatter: '个人{a} <br/> {b} :{c}'
2.回调函数
formatter: params => params[0].name + '的分数是:' + params[0].data
params这个参数是一个数组,数组成员是数据集对象,
第一个参数 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<String>,
// 数据的维度 index,如 0 或 1 或 2 ...
// 仅在雷达图中使用。
dimensionIndex: number,
// 数据图形的颜色
color: string,
// 饼图的百分比
percent: number,
}