Echarts配置项-4

本文详细介绍了Echarts中的axisPointer配置,包括如何显示坐标轴指示器、显示label、触屏交互设置及自动吸附到数据功能。通过设置axisPointer.show、tooltip触发类型等,实现辅助查看数据的互动效果,提升图表用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

配置项setOption()


全局配置


axisPointer 坐标指示器

坐标轴指示器是指示坐标轴当前刻度的工具。

如下例,鼠标悬浮到图上,可以出现标线和刻度文本。axisPointer官网实例

这里写图片描述

上例中,使用了 axisPointer.link关联不同的坐标系中的 axisPointer。


坐标轴指示器也有适合触屏的交互方式,如下: 案例链接

这里写图片描述


坐标轴指示器在多轴的场景能起到辅助作用:

这里写图片描述

PS: 注意: 一般来说,axisPointer 的具体配置项会配置在各个轴中
    (如 xAxis.axisPointer)或者 tooltip 中(如 tooltip.axisPointer)。
    但是这几个选项只能配置在全局的 axisPointer 中:
    axisPointer.triggerOn  、  axisPointer.link

如何显示 axisPointer:

直角坐标系 grid、极坐标系 polar、单轴坐标系 single 中的每个轴都自己的 axisPointer。
他们的 axisPointer 默认不显示。有两种方法可以让他们显示:


如何显示 axisPointer 的 label:

axisPointer 的 label 默认不显示(也就是默认只显示指示线),除非:


关于触屏的 axisPointer 的设置

设置轴上的 axisPointer.handle.show(例如 xAxis.axisPointer.handle.show 为 true 则会显示出此 axisPointer 的拖拽按钮。(polar 坐标系暂不支持此功能)。

注意: 如果发现此时 tooltip 效果不良好,可设置 tooltip.triggerOn‘none’(于是效果为:手指按住按钮则显示 tooltip,松开按钮则隐藏 tooltip),或者 tooltip.alwaysShowContent 为 true(效果为 tooltip 一直显示)。

查看官方栗子 拖住显示tooltip,松开隐藏


自动吸附到数据(snap)

对于数值轴、时间轴,如果开启了 snap,则 axisPointer 会自动吸附到最近的点上。 继续查看栗子,吸附案例


PS: 总的来说,axisPointer 坐标轴指示器适用于辅助查看数据的,让我们一眼可以直观的看清所选择的数据情况,对于互动效果也挺好,提高逼格。用在坐标轴中,记住-坐标轴中-轴中

  • 上面的需要关注的事,如何显示,一般就设置为true就行,或者直接设置类型,还有层级关系,在最里面(子属性里面)的层级是最高的

  • 吸附功能在拖拽的时候很有必要,能准确的找到目标值位置

  • cross 十字准星指示器,只有子属性里面才有这个类型,在全局里面是不能设置的


每日一更Echarts,每日一点小积累…

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值