tooltip详解(1)——概述

提示框组件tooltip详解

提示框组件可以设置在多种地方：

• 可以设置在全局，即 tooltip
• 可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
• 可以设置在系列中，即 series.tooltip
• 可以设置在系列的每个数据项中，即 series.data.tooltip

下面是tooltip的部分参数的取值及含义：

下面我们来解析部分tooltip的一些常用属性：

（1）提示内容对其方式：textStyle。

textStyle:{
align:'left'
}

tooltip的align的值可以有“center”、left、right，分别代表“居中对齐“、“左对齐”、“右对齐”。

（2）提示框触发方式：trigger

tooltip的trigger的值可以有’item’、’axis’。

• ‘item’:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
• ‘axis’:坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用

（3）提示框触发的条件：tooltip. triggerOn

tooltip的triggerOn的值可以有：

• ‘mousemove’

鼠标移动时触发。

• ‘click’

鼠标点击时触发。

• ‘mousemove|click’

同时鼠标移动和点击时触发。

• ‘none’

不在 ‘mousemove’ 或 ‘click’ 时触发，用户可以通过 action.tooltip.showTip 和 action.tooltip.hideTip 来手动触发和隐藏。也可以通过 axisPointer.handle 来触发或隐藏。。

（4）提示框的格式：formatter

提示框的格式主要分为两种：

字符串模板和自定义模板

字符串模板：

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

自定义函数（回调函数）：

回调函数格式：

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

第一个参数 params 是 formatter 需要的数据集。

格式如下：

{
     componentType: 'series',
     // 系列类型
     seriesType: string,
     // 系列在传入的 option.series 中的 index
     seriesIndex: number,
     // 系列名称
     seriesName: string,
     // 数据名，类目名
     name: string,
     // 数据在传入的 data 数组中的 index
     dataIndex: number,
     // 传入的原始数据项
     data: Object,
     // 传入的数据值
     value: number|Array,
     // 数据图形的颜色
     color: string,

     // 饼图的百分比
     percent: number,

 }

在 trigger 为 ‘axis’ 的时候，或者 tooltip 被 axisPointer 触发的时候，params 是多个系列的数据数组。其中每项内容格式同上，并且，

{
    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,

}

第二个参数 ticket 是异步回调标识，配合第三个参数 callback 使用。

第三个参数 callback 是异步回调.

在提示框浮层内容是异步获取的时候，可以通过 callback 传入上述的 ticket 和 html 更新提示框浮层内容。

tooltip提示框详解：

下面我们举一个tooptip的实例，相关代码的对应解释见注释。

tooltip ={                                      //提示框组件
trigger: 'item',                            //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
triggerOn:"mousemove",                      //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
showContent:true,                           //是否显示提示框浮层
alwaysShowContent:true,                     //是否永远显示提示框内容
showDelay:0,                                  //浮层显示的延迟，单位为 ms
hideDelay:100,                                //浮层隐藏的延迟，单位为 ms
enterable:false,                             //鼠标是否可进入提示框浮层中
confine:false,                               //是否将 tooltip 框限制在图表的区域内
transitionDuration:0.4,                      //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
position:['50%', '50%'],                    //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
formatter:"{b0}: {c0}<br />{b1}: {c1}",     //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
backgroundColor:"transparent",            //标题背景色
borderColor:"#ccc",                        //边框颜色
borderWidth:0,                              //边框线宽
padding:5,                                  //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
textStyle:mytextStyle,                     //文本样式
};