**
tooltip //提示框组件。
出现位置
**
- 可以设置在全局，即 tooltip
- 可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
- 可以设置在系列中，即 series.tooltip
- 可以设置在系列的每个数据项中，即 series.data.tooltip
示例
下面是一个示例，只列举部分属性 最下方有其余配置项简介
tooltip: {
show: true, // 是否显示提示框组件
trigger: 'axis', // 触发类型（'item'，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis'，坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；'none'，不触发。）
axisPointer: {
type: 'line', // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
snap: false, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
label: {
margin: 10, // label 距离轴的距离
color: '#FFF', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
lineHeight: '50', // 行高
padding = [5, 7, 5, 7], // 内边距，单位px
backgroundColor = 'auto', // 文本标签的背景颜色
}
}
showContent: true, // 是否显示提示框浮层，默认显示
alwaysShowContent: true, // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
confine: true, // 是否将 tooltip 框限制在图表的区域内
textStyle: {
color: '#FFF', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '20', // 文字字体大小
lineHeight: '50', // 行高
},
formatter: function (params) {
return '2022年数据' + '<br/>'
+ params[0].marker + params[0].seriesName + '：' + params[0].data + '<br>'
+ params[1].marker + params[1].seriesName + '：' + params[1].data + '<br>'
+ params[2].marker + params[2].seriesName + '：' + params[2].data
}
}属性简单介绍
以下是tooltip的相关属性和配置项
tooltip:{
show:true, // 是否显示提示框组件。（包括提示框浮层和 axisPointer） boolean值 默认为false 不显示状态
backgroundColor:'rgba(50,50,50,0.7)',//提示框浮层的背景颜色。color
triggerOn :'mousemove|click', //提示框触发的条件 ECharts 3.0 中新加 可选 [mousemove click mousemove|click none] 不在 'mousemove' 或 'click' 时触发，用户可以通过 action.tooltip.showTip 和 action.tooltip.hideTip 来手动触发和隐藏。也可以通过 axisPointer.handle 来触发或隐藏。
borderColor:'#333',提示框浮层的边框颜色,
borderWidth:2,//提示框浮层的边框宽。单位px
padding:2,//提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
confine: true,//是否将 tooltip 框限制在图表的区域内。boolean 图表外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
textStyle:{ //提示框浮层的文本样式。
color: '#fff', //文字的颜色。
fontStyle: 'normal', //文字字体的风格。
fontWeight: 'normal', // 文字字体的粗细 string [ normal bold bolder lighter] number
//参数太多参考官方文档 不一一列举
}
enterable:false, //鼠标是否可进入提示框浮层中， boolean 默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
trigger:'axis', //提示框触发类型。trigger设置后默认提示框显示，string 'item'（数据项图形触发） 'axis'（坐标轴触发） 'none'（什么都不触发）
// 绝对位置，相对于容器左侧 10px, 上侧 10 px
position: [10, 10], //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置 string Array Function
// 相对位置，放置在容器正中间 如采用function 可查看官方文档 内有详细的定位参数
// position: ['50%', '50%']
formatter:{ //提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
//相关参数变量过多，建议查看官方文档
}
//tooltip.axisPointer 中诸配置项的优先级低于轴上的 axisPointer 的配置项。（例如 xAxis.axisPointer 或 angleAxis.axisPointer）
axisPointer:{ //坐标轴指示器。坐标轴触发有效 作用：提示图表中鼠标在各坐标轴当前刻度。
show:true,
type :'line',//指示器类型。 type设置后默认提示框显示 string 直线指示器 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
axis :'y',//指示器指向的坐标轴。string 默认自动取类目轴或者时间轴。 可选 'x', 'y', 'radius', 'angle'
snap:true,//坐标轴指示器是否自动吸附到点上。 boolean默认自动判断。这个功能在数值轴和时间轴上比较有意义，可以自动寻找细小的数值点。
z:99, //控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。类似z-index
//文本标签
label:{ //坐标轴指示器的文本标签。
show:true ,//是否显示
//label属性太多就不展示了 可自己细看官方文档 { show , precision , formatter , margin , color , fontStyle , fontWeight , fontFamily , fontSize , lineHeight , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , padding , backgroundColor , borderColor , borderWidth , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY }
},
//指示器类型
lineStyle:{ // 指示器类型的样式 axisPointer.type 为 'line' 时有效。
//同样属性太多就不展示了 color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity
},
同样type为 'shadow' 'cross'时，也有对应样式
// shadowStyle:{
// //指示器类型的样式 axisPointer.type 为 'shadow' 时有效。
// }
// crossStyle:{
// //指示器类型的样式 axisPointer.type 为 'cross' 时有效。
// }
//动画效果
animation: true , //是否开启动画 boolean
animationThreshold :2000, //是否开启动画的阈值， num 当单个系列显示的图形数量大于这个阈值时会关闭动画。
animationDuration :1000,//初始动画的时长，num Function 支持回调函数，
// animationDuration : function (idx) {
// // 越往后的数据时长越大
// return idx * 100;
// }
animationEasing:'cubicOut',//初始动画的缓动效果 string
animationDelay:1000,//初始动画的延迟，number Function支持回调函数
animationDurationUpdate:1000,//数据更新动画的时长。number Function支持回调函数
animationEasingUpdate :'exponentialOut' ,//数据更新动画的缓动效果。 string
animationDelayUpdate:1000,//数据更新动画的延迟，支持回调函数，number Function
},
showContent:true,//是否显示提示框浮层，默认显示 boolean
alwaysShowContent:true,//是否永远显示提示框内容，该属性为 ECharts 3.0 中新加,默认情况下在移出可触发提示框区域后 一定时间 后隐藏，设置为 true 可以保证一直显示提示框内容。
showDelay:500, //浮层显示的延迟，num 单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
hideDelay:500,//浮层隐藏的延迟，num 单位为 ms，在 alwaysShowContent 为 true 的时候无效。
enterable:false, //鼠标是否可进入提示框浮层中， boolean 默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
renderMode:'html',// 浮层的渲染模式，string 默认以 'html 即额外的 DOM 节点展示 tooltip； 还可以设置为 'richText' 表示以富文本的形式渲染,对于一些没有 DOM 的环境（如微信小程序）有更好的支持。
appendToBody:true,//是否将 tooltip 的 DOM 节点添加为 HTML 的 <body> 的子节点 从 v4.7.0 开始支持 boolean
transitionDuration:0.3,//提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
extraCssText:'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' , //额外附加到浮层的 css 样式 string,
order://多系列提示框浮层排列顺序。 string 默认值为 'seriesAsc' 可选[seriesAsc seriesDesc valueAsc valueDesc]
},
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
