数据可视化: Echarts JS 数表显示插件的使用（1）---- Tootip 配置的小技巧

在数据可视化的过程中，前端的可视化模块是一个非常重要的部分。

在 JAVASCRIPT 的前端数表插件有很多。例如 ChartJS，Flot，MorisJS，还有百度的 Echarts，其中 Echarts 的文档建设和国内案例的丰富性让我更倾向于 Echarts 作为数表前端展示的插件。

今天介绍一下 Echarts 中的很重要的一个配置： Tooltip。

所谓 ToolTip，即是鼠标在 Echarts 图标上面的 Item / Axis 等上面的时候，显示的浮动框以及浮动框内部的信息。

如上图中的灰黑色的方框部分。

在 Tooltip 的配置方面，首先应该了解 ToolTip 在前端的显示逻辑是怎样的，其次推荐一些代码进行相关配置，可以减少走弯路的时间

ToolTip 的HTML 元素特点

首先介绍一下 ToolTip 在 HTML 中的元素的特性 

注意上图中的红色部分为 ToolTip 的部分，观察其所属的 div 元素的层级和 Echars Canvas 元素的父层级是同一级。

所以所有应用于 Canvas 父层级的 CSS 样式也会用到 ToolTip 的父元素！这个是我走过的坑，因为当时我把 Canvas 父元素的高度设为 100%，造成了 ToolTip 的高度不受控，后来看到一些大神的帖子才发现这个问题。

ToolTip的位置（position）配置

ToolTip在Echarts图表中的位置是和鼠标的位置，鼠标所在的图表元素的位置相关的。

例如，鼠标指向的元素在图表的下方，那么我们希望ToolTip可以出现在图表元素的上方，反之亦然。同时，要保证ToolTip不会如上面图片中的情况一样被父层级的边框隐藏，进而造成显示不全的问题。

但是，Echarts 在 ToolTip 自身的配值中只是硬性规定ToolTip相对所指图表元素的位置，不能灵活变换，所以有两种解决办法：

1. 设置 confine 为 true，如下：

tootip: {
    confine: true
}

但是，本人实测之后的效果并不是很让人满意。在有些情况下还是存在不能完全显示的问题。 

2. 通过更灵活的配值回调函数的方法，其中的经典代码如下： 

            position: function (point, params, dom, rect, size) {
            
                // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
                var x = 0; // x坐标位置
                var y = 0; // y坐标位置

                var pointX = point[0];
                var pointY = point[1];

                // 提示框大小
                var boxWidth = size.contentSize[0];
                var boxHeight = size.contentSize[1];
                
                // boxWidth > pointX 说明鼠标左边放不下提示框
                if (boxWidth > pointX) {
                    x = 5;
                } else { // 左边放的下
                    x = pointX - boxWidth;
                }
                
                // boxHeight > pointY 说明鼠标上边放不下提示框
                if (boxHeight > pointY) {
                    y = 5;
                } else { // 上边放得下
                    y = pointY - boxHeight;
                }
                return [x, y];
            },

以上的代码通过配值，发现能够很好的解决现存的问题！

当然，这个算法还是偏简单， 推荐各位同学可以根据这个逻辑做一些更精细化的配置