Tooltip, a data tip tool that provides detailed information about data points when the user hovers the mouse over the chart. Configuration changes can be configured in the global, grid (coordinate system), series (series) and series.data (series data) scopes.
The final configuration code of the article is Anatomy diagram examplecode
There is a complete prompt component configuration in the previous grid configuration. The following uses the global configuration as an example:
1. Prompt component tooltip configuration
// 全局配置 提示组件
option={
tooltip:{
show:true, // 是否显示提示组件
trigger:'item', // 提示组件触发类型
// 坐标指示器配置 头
axisPointer:{
type:'line', // 指示器类型
axis:'auto', // 指示器的坐标轴
snap:true, // 坐标轴指示器是否吸附到具体的数值点上
z:1, // 坐标轴指示器的 z 值，图形层级
// 指示器文本标签配置 头
label:{
show:true, // 是否显示文本标签
precision:2, // 文本标签中数值的精度，当前保留两位小数点
formatter:'{value}单位', // 文本标签格式器，可以使用方法
margin:10, // 文本标签距离轴的距离
color:'red', // 文字颜色
fontStyle:'normal', // 字体的风格
fontWeight:'normal', // 字体粗细
fontFamily:'serif', // 字体系列
fontSize:15, // 字体大小
lineHeight:15, // 行高
width:100, // 文本显示宽度
height:100, // 文本显示高度
textBorderColor:'red', // 文字描边颜色
textBorderWidth:20, // 文字描边宽度
textBorderType:'solid', // 文字描边类型
textBorderDashOffset:2, // 文字描边为虚线时，虚线的偏移量
textShadowColor:'red', // 文字阴影
textShadowBlur:10, // 文字阴影长度
textShadowOffsetX:10, // 文字阴影水平偏移量
textShadowOffsetY:10, // 文字阴影竖直偏移量
overflow:'truncate', // 文字超出宽度是否截断或者换行
ellipsis:'···', // 文字超出宽度设置为 truncate 时，末尾显示内容
padding:[5,5,5,5], // 文本标签的内边距
backgroundColr:'red', // 文本标签的背景颜色
borderColor:'red', // 文本标签边框颜色
borderWidth:10, // 文本标签的边框宽度
shadowBlur:3, // 文本标签阴影
shadowColor:'red', // 文本标签阴影颜色
shadowOffsetX:10, // 文本标签阴影水平偏移量
shadowOffsetY:10, // 文本标签阴影竖直偏移量
},
// 指示器文本标签配置 尾
// 直线指示器的样式, type 为 line 生效， 头
lineStyle:{
color:'red', // 线的颜色
width:2, // 线的宽度
type:'solid', // 线的类型
dashOffset:10, // 线的类型为虚线时，虚线的偏移量
cap:'butt', // 线段末端形状
join:'bevel', // 两个线段连接部分的形状
miterLimit:10, // join 为 miter 时,斜接面比例
shadowBlur:10, // 线的阴影
shadowColor:'red', // 线的阴影颜色
shadowOffsetX:10, // 阴影水平偏移量
shadowOffsetY:10, // 阴影竖直偏移量
opacity:0.8, // 线的透明度
},
// 直线指示器的样式, type 为 line 生效， 尾
// 阴影指示器图形样式, type 为 shadow 生效， 头
shadowStyle:{
color:'red', // 图形填充颜色
shadowBlur:10, // 图形阴影大小
shadowColor:'red', // 图形阴影颜色
shadowOffsetX:'red', // 图形阴影水平偏移量
shadowOffsetY:'red', // 图形阴影竖直偏移量
opacity:0.8, // 图形透明度
},
// 阴影指示器图形样式, type 为 shadow 生效， 尾
// 十字准星指示器样式,type 为 cross 生效，头
crossStyle:{
color:'red', // 线的颜色
width:2, // 线的宽度
type:'dashed', // 线的类型
dashOffset:10, // 线的类型为虚线时，虚线的偏移量
cap:'butt', // 指定线段末端的图形
join:'bevel', // 两个线段连接处的形状
miterLimit:10, // join 为 miter 时，斜接面比例
shadowBlur:10, // 线的阴影程度
shadowColor:'red', // 线的阴影颜色
shadowOffsetX:10, // 线阴影的水平偏移量
shadowOffsetY:10, // 线阴影的竖直偏移量
opacity:0.8, // 线的透明度
}
// 十字准星指示器样式,type 为 cross 生效 尾
animation:true, // 是否开启动画
animationThreshold:100, // 动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。
animationDuration:100, // 初始动画时长
animationEasing:'cubicIn', // 初始动画的缓动效果
animationDelay:100, // 初始动画的延迟
animationDurationUpdate:200, // 数据更新动画时长
animationEasingUpdate:'linear', // 数据更新缓动效果
animationDelayUpdate:100, // 数据更新动画延迟
}
// 坐标指示器配置 尾
showContent:true, // 是否显示提示框浮层
alwaysShowContent:true, // 是否一直显示提示框内容
triggerOn:'click', // 提示框触发的条件
showDelay:100, // 浮层显示的延迟时间
hideDelay:100, // 浮层隐藏的延迟
enterable:true, // 鼠标是否可以进入提示框浮层中
renderMode:'html', // 浮层渲染模式
confine:true, // 将 tooltip 框限制在图表区域内
appendToBody:true, // 是否将 tooltip 的 DOM 节点添加到 HTML 的 body 子节点上
className:'name', // 指定 DOM 节点类名
transitionDuration:2, // 提示框浮层的移动动画过度时间，单位 S/秒
position:'left', // 提示框浮层的位置，设置之后就会固定，不会跟随鼠标移动
formatter:'{a}单位' // 提示框浮层内容格式器，模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
valueFormatter:(value) => '$' + value.toFixed(2), // tooltip 中数值显示部分的格式化回调函数。
backgroundColor:'red', // 提示框浮层的背景颜色
borderColor:'#333', // 提示框浮层的边框颜色
borderWidth:3, // 提示框浮层的边框宽度
padding:[5,5,5,5], // 提示框浮层的内边距
// 提示框浮层的文本样式 头
textStyle:{
color:'red', // 文字的颜色
fontStyle:'normal', // 字体的风格
fontWeight:'normal', // 字体的粗细
fontFamily:'serif', // 字体系列
fontSzie:15, // 字体大小
lineHeight:20, // 行高
width:10, // 文本显示宽度
height:100, // 文本显示高度
textBorderColor:'red', // 文字描边颜色
textBorderWidth:10, // 文字描边宽度
textBorderType:'solid', // 文字描边类型
textBorderDashOffset:10, // 描边类型为虚线时，虚线的偏移量
textShadowColor:'red', // 文字阴影颜色
textShadowBlur:10, // 文字阴影长度
textShadowOffsetX:10, // 文字阴影水平偏移量
textShadowOffsetY:10, // 文字阴影竖直偏移量
overflow:'none', // 文字超出宽度截断或者换行
ellipsis:'···', // overflow 配置为 truncate 的时候，文本末尾显示的文本
}
// 提示框浮层的文本样式 尾
extraCssText:'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额外附加到浮层的 css 样式。
order:'seriesAsc', // 多系列提示框浮层排列顺序。
}
}2. Anatomy diagram
3. Anatomy diagram option configuration code
use:
Code:
const colors = ['#5470C6', '#EE6666','green'];
option = {
color: colors,
tooltip: {
show:true,
trigger: 'axis',
axisPointer: {
// 全局配置 十字准星指示器
type: 'cross'
}
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
// 线的样式配置
axisLine: {
onZero: false,
lineStyle: {
color: colors[2]
}
},
// 将该 X 轴绑定到第二个画布
gridIndex:1,
//单独配置第三个 X 轴的提示器样式
axisPointer: {
type: 'shadow',
label: {
// 自定义 标签显示的内容
formatter: function (params) {
return (
'系列三' +
params.value +
(params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
},
},
shadowStyle:{
color:'green',
opacity:0.2,
},
},
data: ['2017-1', '2017-2', '2017-3', '2017-4', '2017-5', '2017-6', '2017-7', '2017-8', '2017-9', '2017-10', '2017-11', '2017-12']
},
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[1]
}
},
// 单独配置第二个 X 轴的提示器样式
axisPointer: {
show:true,
label: {
formatter: function (params) {
return (
'系列二' +
params.value +
(params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
},
margin:30,
},
},
data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
},
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[0]
}
},
// 单独配置第三个 X 轴的提示器样式
axisPointer: {
label: {
formatter: function (params) {
return (
'系列一' +
params.value +
(params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
}
}
},
data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
},
],
legend: {},
grid:[{
width:'45%',
height:'50%',
top: '25%',
left:'3%'
},{
width:'45%',
height:'50%',
top: '25%',
left:'55%'
}
],
// y 轴未配置
yAxis: [
{
type: 'value',
gridIndex:1,
},
{
type: 'value',
},
{
type: 'value',
},
],
series: [
{
name: '系列一2015',
type: 'line',
// 该系列绑定在 第三个 X 轴上来绘制
xAxisIndex: 2,
yAxisIndex:2,
smooth: true,
emphasis: {
focus: 'series'
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: '系列二2016',
type: 'line',
// 该系列绑定在 第二个 X 轴上来绘制
xAxisIndex: 1,
yAxisIndex:1,
smooth: true,
emphasis: {
focus: 'series'
},
data: [
3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
]
},
{
name: '系列三2017',
type: 'line',
smooth: true,
// 该系列绑定在 第一个 X 轴上来绘制
xAxisIndex:0,
yAxisIndex:0,
emphasis: {
focus: 'series'
},
data: [
15.2,26.8,32.2,42.3,55.6,89.6,196,192,126,66.5,42.3,26.8
]
}
]
};