Echart是广泛使用的图标插件，提供了非常详尽的配置，熟练掌握后，可以生成非常丰富炫酷的样式。但我们大多停留在 找demo -> CV -> 绑定数据 的阶段。尽管大部分需求官网demo就足够了，但稍微复杂一些，就让人头大了。很多人可能不知道，其实我们是可以利用Echart提供的组件及相关配置来实现某些想要的效果的。下面介绍下本人的一次小尝试。
本文展示在官网demo基础上，添加自定义提示框组件的过程。
一、找demo
二、demo很好，现在是我的了
三、这个提示框效果不错哦，怎么搞？
经过观察demo配置和Echart配置项，发现是tooltip，即提示框组件。
- tooltip.trigger = ‘axis’ // 触发类型
- tooltip.axisPointer.type = ‘shadow’ // 指示器类型
显示坐标轴上的数值可以直接抄demo，但想自定义就需要用tooltip的position属性控制提示框位置以及formatter属性控制显示内容。
- tooltip.formatter：提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
经过多番尝试，最终选择了回调函数形式，在源数据上添加一个字段记录显示值，通过回调函数返回显示。
formatter: function (params, ticket, callback) {
return params[0].value[3];
},回调函数中可以console.log打印数据哦。
- tooltip.position：提示框浮层的位置，默认不设置时位置会跟随鼠标的位置
实际效果显示默认的position方案在显示内容过长时，会出现超出图外，看不全内容的情况。
查阅文档发现Echart也提供了回调函数控制position
参数：
point: 鼠标位置，如 [20, 40]。
params: 同 formatter 的参数相同。
dom: tooltip 的 dom 对象。
rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。
size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。
显示策略：横向上，随鼠标而动的内容超出边界时，提示框靠右显示；纵向上，跟随鼠标
position: function (point, params, dom, rect, size) {
var pX = (size.contentSize[0] + point[0] > size.viewSize[0]) ?
size.viewSize[0] - size.contentSize[0] : point[0];
var pY = point[1] - size.contentSize[1]/2;
return [pX, pY];
}四、最终图表
看，少量配置就能添加一个自定义的提示框了
其它有意思的组件、配置，可以通过查阅Echart官网的配置项和API，内容很详尽
