echarts的tooltip提示框_echarts tooltip

提示框组件tootip

一共20个属性

1. show 显示与否（默认true）
2. trigger 触发类型（默认item）
3. axisPointer 坐标轴指示器配置项
4. showContent 是否显示提示框浮层（默认true）
5. alwaysShowContent 是否永远显示提示框（默认false,在移出可触发提示框区域后 一定时间 后隐藏）
6. triggerOn （提示框触发的条件）
7. showDelay （显示延迟，默认0）
8. hideDelay （隐藏延迟，默认100ms）
9. enterable （鼠标是否可进入提示框浮层中,默认false）
10. renderMode （浮层的渲染模式）
11. confine （是否将 tooltip 框限制在图表的区域内,移动端自适应）
12. transitionDuration （提示框浮层的移动动画过渡时间）
13. position （提示框浮层的位置）
14. formatter （提示框浮层内容格式器，支持字符串模板和回调函数两种形式。）
15. backgroundColor （提示框浮层的背景颜色）
16. borderColor （提示框浮层的边框颜色）
17. borderWidth （提示框浮层的边框宽）
18. padding （提示框浮层内边距）
19. textStyle （提示框浮层的文本样式）
20. extraCssText （额外附加到浮层的 css 样式）

具体用法

2.trigger–触发类型

3.axisPointer–坐标轴指示器配置项

• type（默认是line）
  • line 直线指示器
  • shadow 阴影指示器
  • none 无指示器
  • cross 十字准星指示器
• axis 指示器的坐标轴–默认auto
  • x
  • y
  • radius
  • angle

几种类型的指示器

注意：

• 如果option中没有tooltip对象，则鼠标滑上去的时候不显示弹框；
• 如果有option，但是没有添加属性，tooltip：{}，则按照默认的type为item，axisPointer:line，只有鼠标点到折点的时候，才会显示默认的tootip
• 如果有option，设置了tooltip：{type：axis}，则默认是line线。如果axisPointer:none;则鼠标滑动折线图表的点位上下的任意位置都能显示点位的弹框

4. showContent – 是否显示弹框

默认为true
false的时候，只能tooltip触发事件或显示axisPointer而不显示内容时

6. triggerOn-- 提示框触发的条件

[ default: 'mousemove|click' ]

用户可以通过 action.tooltip.showTip 和 action.tooltip.hideTip 来手动触发和隐藏。也可以通过 axisPointer.handle 来触发或隐藏。

9. enterable – 鼠标是否可进入提示框浮层中

[ default: false ]
鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。

14. 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}'
1

2. 函数模板

第一个参数 params 是 formatter 需要的数据集
第二个参数 ticket 是异步回调标识，配合第三个参数 callback 使用
第三个参数 callback 是异步回调，在提示框浮层内容是异步获取的时候，可以通过 callback 传入上述的 ticket 和 html 更新提示框浮层内容。

formatter: function (params, ticket, callback) {
    $.get('detail?name=' + params.name, function (content) {
        callback(ticket, toHTML(content));
    });
    return 'Loading';
}
1
2
3
4
5
6

20. extraCssText （额外附加到浮层的 css 样式）

extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
1