Echarts-提示框组件

当图表数据计量过大，图形过于密集的话，单凭肉眼是很难一眼就看出数据量的，所以使用 Echarts 图表的过程中，tooltip 也是一个非常重要的组件。下面就来看看它的用法，看看怎么和数据联动，实现各种各样的提示框。

在 option 中，添加 tooltip:{show:true} 就能够开启提示框组件的显示了，不过这时候你可能还是看不到提示框的显示，这是因为，需要设置触发方式才能顺利显示提示框。需要在 tooltip 配置项中添加 trigger:<triggerName>，一共有三种类型："item"（主要用在没有坐标轴的图表）、"axis"（用在有坐标轴的图表）、"none"（不触发）；默认的触发事件是 mousemove，也就是鼠标移动过去的时候它就会显示，移出消失，可以通过设置 tooltip.triggerOn = 'click' 设置为鼠标左键单击显示，除非设置过延迟隐藏，或者是鼠标移出图表 dom 范围，否则这个提示框会一直停留。它大体上可以分为两个部分，即坐标轴指示器和浮框。下面会大致介绍一些关于这两个组件的设置。

坐标轴指示器 ​

坐标轴指示器可以通过 tootip.axisPointer 进行设置，也可以直接通过 axisPointer 进行全局设置。

坐标轴指示器的类型可以通过 tooltip.axisPointer.type 进行以下设置：

"line"

设置为类型为 line 之后，可以通过 lineStyle 设置样式，但是 cross 不行。

"shadow" 设置为 shadow 之后，可以通过 shadowStyle 设置样式。

"cross" 设置为 cross 之后，可以通过 crossStyle 设置样式。

"none" 即不进行任何提示。

指示器标签 ​

通过 tooltip.axisPointer.label 进行设置，设置 show = true 显示标签之后，会在坐标轴通过设定的格式进行坐标轴文本的高亮显示，默认会这样显示：

详细配置可以看看 官方文档。

剩下的一些配置都是这个指示器的动画设置。

浮框层 ​

浮框层可以将鼠标所选区域的数据通过文本显示出来，如果只需要指示器效果，而不需要浮框层的显示，可以在 tooltip 下配置 showContent = false 不显示这个浮框层，默认浮框层是会鼠标离开图标后隐藏，隐藏的延迟通过 hideDelay 属性进行设置，单位是毫秒，同样也可以设置触发提示框组件之后延迟多久显示浮框层，通过 showDelay 进行设置。

交互 ​

默认情况下，浮框层的位置始终会跟随鼠标，有时候我们的图标 dom 大小没有留足够的空间，浮框层在边界被截断了，会产生显示不全的现象，这样就需要设置 confine = true 来使得浮框层能够一直在图表 dom 内显示。当然，也可以固定浮框层的位置：

通过数组的形式，设置浮框层左上角相对于图表左上角的位置：[1,1] 是固定距离，距离图表左侧 1px，上侧 1px；[50%,50%] 是处于图表中间（注意是左上角处于图表中间，并不是浮框层的中心点对准图表中心点）。

当你的 trigger 参数设置为 "item" 时，你可以对 position 进行相对于 item 的设置即："inside"、"top"、"left"、"right"、"bottom" 对于这个浮框层的位置，可以参考下图：

有时，我们想要在浮框层里面进行一些交互设计，默认情况下鼠标是很难做到进入浮框层内的，这时候通过设置 tooltip. enterable ​ 就能够很轻松地在任何情况下让鼠标进入浮框层进行交互了。

渲染 ​

echarts 图表的渲染模式有两种模式，一种是 svg 一种是 canvas，但是浮框层可以设置为 html 格式，通过 tooltip.renderMode ="html"进行设置，如果设置了 html 渲染模式的话，就可以通过tooltip.className设置该 html 节点的类名。同时，由于 html 模式渲染出的组件默认是包括在图表根节点内，所以当图表根节点设置了 overflow: hidden 的时候，渲染出来的浮框层即使是设置了 confine 属性，也有可能显示不全，所以官方提供了tootip.appendToBody = true 这个选项来使得浮框层是直属 body 的元素，一定程度上解决了显示不全的情况。

对于浮框层的文本，文本的样式可以通过 tooltip.textStyle 选项设置，文本显示格式可以通过 tooltip.formatter 控制，对于文本中数值的处理，通过 tooltip.valueFormatter 进行设置，参数是需要提供一个处理函数：

(value) => value.toFixed (1)+ '℃'
// 传入 36
// 输出 36.0℃

对于浮框层本身，可配置的属性有 backgroundColor、borderWidth、borderColor、padding 但是对于长度的话，不需要额外添加单位；基本上和 css 的属性配置是一样的，但是 padding 的速记形式不可以像 css 那样设置，顺序是一样的，但是需要套个数组，如 [5,10] 就是上下内边距 5px，左右内边距 10px。如果想要设置额外的 css 属性，需要通过设置 tooltip.extraCssText 进行添加，就像写 html 行内样式一样。

到这里，对于 echarts 的提示框组件基本介绍完毕，可以见得我们能够通过一系列的设置，设计出我们想要的提示框组件。