本文详细介绍了ECharts中Tooltip模块的各项配置参数及使用方法，包括显示策略、触发方式、位置及内容格式等，帮助开发者更好地利用Tooltip提升图表的用户体验。
tooltip:提示框，鼠标悬浮交互时的信息提示。
以下是官方给出的表格1
| 名称 | 默认值 | 描述 |
|---|---|---|
| {boolean} show | true | 显示策略，可选为：true（显示） |
| {number} zlevel | 1 | 一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。 |
| {number} z | 8 | 二级层叠控制，同一个canvas（相同zlevel）上z越高约靠顶层。 |
| {boolean} showContent | true | tooltip主体内容显示策略，只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false，可选为：true（显示） | false（隐藏） |
| {string} trigger | ‘item’ | 触发类型，默认数据触发，见下图，可选为：’item’ | ‘axis’ |
| {Array|Function} position | null | 位置指定，传入{Array}，如[x, y]， 固定位置[x, y]；传入{Function}，如function([x, y]) {return [newX,newY]}，默认显示坐标为输入参数，用户指定的新坐标为输出返回。 |
| {string|Function} formatter | null | 内容格式器：{string}（Template）| {Function}，支持异步回调 |
| {string|Function} islandFormatter | ‘{a} < br/>{b} : {c}’ | 拖拽重计算独有，数据孤岛内容格式器：{string}（Template）| {Function} |
| {number} showDelay | 20 | 显示延迟，添加显示延迟可以避免频繁切换，特别是在详情内容需要异步获取的场景，单位ms |
| {number} hideDelay | 100 | 隐藏延迟，单位ms |
| {boolean} enterable | false | 鼠标是否可进入详情气泡中，默认为false，如需详情内交互，如添加链接，按钮，可设置为true。 |
| {color} backgroundColor | ‘rgba(0,0,0,0.7)’ | 提示背景颜色，默认为透明度为0.7的黑色 |
| {string} borderColor | ‘#333’ | 提示边框颜色 |
| {number} borderRadius | 4 | 提示边框圆角，单位px，默认为4 |
| {number} borderWidth | 0 | 提示边框线宽，单位px，默认为0（无边框） |
| {number|Array} padding | 5 | 提示内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css |
| {Object} axisPointer | 目前还没弄明白怎么在markdown的table中插入代码，如果有大神告知，不胜感激 | 提示内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css |
| {Object} textStyle | { color:’#fff’ } | 文本样式，默认为白色字体（详见textStyle） |
鉴于只有文字说明，没有效果对比，在以下的博客中博主将会对tooltip中的每个属性的效果陈列出来供读者学习。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
