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

myProject-code

已于 2022-06-15 15:43:28 修改

阅读量6.5k

点赞数 7

分类专栏： Echarts 文章标签： echarts 前端 javascript

于 2022-06-15 15:41:56 首次发布

本文链接：https://blog.csdn.net/qq_42462993/article/details/125296566

版权

Echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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阴影
	}
},

示例图:
当trigger为'item'时
2.axisPointer的type为cross

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

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

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

示例图:
trigger为'item'时

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

1.axisPointer的type为line(也就是默认的时候)

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

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

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

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

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'
		}
	}
}