Echarts trigger 提示框 axisPointer 属性,鼠标悬浮交互时的信息提示

不添加 axisPointer 时默认为line

axisPointer: {  //坐标轴指示器,坐标轴触发有效,
        type: 'line', //默认为line,line直线,cross十字准星,shadow阴影
	}
一.当trigger为item时只会显示该点的数据(折线图时鼠标必须放到折点上才会有提示框)

1.axisPointertypeline(也就是默认的时候)

tooltip : {
       trigger: 'item',
       axisPointer: {  //坐标轴指示器,坐标轴触发有效,
        type: 'line', //默认为line,line直线,cross十字准星,shadow阴影
	}
},

示例图:
当trigger为'item'时
2.axisPointertypecross

tooltip : {
       trigger: 'item',
       axisPointer: {  //坐标轴指示器,坐标轴触发有效,
        type: 'cross', //默认为line,line直线,cross十字准星,shadow阴影
	}
},

示例图:
trigger为'item'时
3.axisPointertypeshadow (貌似没啥特别效果,看心情使用)

tooltip : {
       trigger: 'item',
       axisPointer: {  //坐标轴指示器,坐标轴触发有效,
        type: 'shadow', //默认为line,line直线,cross十字准星,shadow阴影
	}
},

示例图:
trigger为'item'时
trigger为'item'时

二.当trigger为axis时显示该列下所有坐标轴所对应的数据

1.axisPointertypeline(也就是默认的时候)

tooltip : {
       trigger: 'axis',
       axisPointer: {  //坐标轴指示器,坐标轴触发有效,
        type: 'line', //默认为line,line直线,cross十字准星,shadow阴影
	}
},

示例图:
当trigger为’axis’时
2.axisPointertypecross(也就是默认的时候)

tooltip : {
       trigger: 'axis',
       axisPointer: {  //坐标轴指示器,坐标轴触发有效,
       	type: 'cross', //默认为line,line直线,cross十字准星,shadow阴影
	}
},

示例图:
当trigger为’axis’时
3.axisPointertypeshadow(也就是默认的时候)

tooltip : {
       trigger: 'axis',
       axisPointer: {  //坐标轴指示器,坐标轴触发有效,
       	type: 'shadow', //默认为line,line直线,cross十字准星,shadow阴影
	}
},

示例图:
当trigger为’axis’时

总结

//提示框取默认值,即鼠标移动到柱状图会显示内容
tooltip: {
    trigger: 'axis', 
    //触发类型;轴触发,
    //axis则鼠标hover到一条柱状图显示全部数据,
    //item则鼠标hover到折线点显示相应数据,
    axisPointer: {  //坐标轴指示器,坐标轴触发有效,
        type: 'line', //默认为line,line直线,cross十字准星,shadow阴影
		crossStyle: {
            color: '#fff'
		}
	}
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐