Echarts trigger 提示框 axisPointer 属性,鼠标悬浮交互时的信息提示
Echarts trigger 提示框 axisPointer 属性,鼠标悬浮交互时的信息提示
·
Echarts trigger 提示框 axisPointer 属性,鼠标悬浮交互时的信息提示
不添加 axisPointer 时默认为line
axisPointer: { //坐标轴指示器,坐标轴触发有效,
type: 'line', //默认为line,line直线,cross十字准星,shadow阴影
}
一.当trigger为item时只会显示该点的数据(折线图时鼠标必须放到折点上才会有提示框)
1.axisPointer的type为line(也就是默认的时候)
tooltip : {
trigger: 'item',
axisPointer: { //坐标轴指示器,坐标轴触发有效,
type: 'line', //默认为line,line直线,cross十字准星,shadow阴影
}
},
示例图:
2.axisPointer的type为cross
tooltip : {
trigger: 'item',
axisPointer: { //坐标轴指示器,坐标轴触发有效,
type: 'cross', //默认为line,line直线,cross十字准星,shadow阴影
}
},
示例图:
3.axisPointer的type为shadow (貌似没啥特别效果,看心情使用)
tooltip : {
trigger: 'item',
axisPointer: { //坐标轴指示器,坐标轴触发有效,
type: 'shadow', //默认为line,line直线,cross十字准星,shadow阴影
}
},
示例图:
二.当trigger为axis时显示该列下所有坐标轴所对应的数据
1.axisPointer的type为line(也就是默认的时候)
tooltip : {
trigger: 'axis',
axisPointer: { //坐标轴指示器,坐标轴触发有效,
type: 'line', //默认为line,line直线,cross十字准星,shadow阴影
}
},
示例图:
2.axisPointer的type为cross(也就是默认的时候)
tooltip : {
trigger: 'axis',
axisPointer: { //坐标轴指示器,坐标轴触发有效,
type: 'cross', //默认为line,line直线,cross十字准星,shadow阴影
}
},
示例图:
3.axisPointer的type为shadow(也就是默认的时候)
tooltip : {
trigger: 'axis',
axisPointer: { //坐标轴指示器,坐标轴触发有效,
type: 'shadow', //默认为line,line直线,cross十字准星,shadow阴影
}
},
示例图:
总结
//提示框取默认值,即鼠标移动到柱状图会显示内容
tooltip: {
trigger: 'axis',
//触发类型;轴触发,
//axis则鼠标hover到一条柱状图显示全部数据,
//item则鼠标hover到折线点显示相应数据,
axisPointer: { //坐标轴指示器,坐标轴触发有效,
type: 'line', //默认为line,line直线,cross十字准星,shadow阴影
crossStyle: {
color: '#fff'
}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)