通用项配置tooltip(提示框组件)

通用项配置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,


}