创新互联ECharts教程:axisPointer配置项

tooltip.axisPointer   |   Object

坐标轴指示器配置项。

为辽阳等地区用户提供了全套网页设计制作服务,及辽阳网站建设行业解决方案。主营业务为成都网站建设、成都做网站、辽阳网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

tooltip.axisPointer 是配置坐标轴指示器的快捷方式。实际上坐标轴指示器的全部功能,都可以通过轴上的 axisPointer 配置项完成(例如 xAxis.axisPointer 或 angleAxis.axisPointer)。但是使用 tooltip.axisPinter 在简单场景下会更方便一些。

注意: tooltip.axisPointer 中诸配置项的优先级低于轴上的 axisPointer 的配置项。

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

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

点击编辑实例 》》

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

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

点击编辑实例 》》

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

点击编辑实例 》》

点击编辑实例 》》

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

如何显示 axisPointer:

直角坐标系 grid、极坐标系 polar、单轴坐标系 single 中的每个轴都自己的 axisPointer。

他们的 axisPointer 默认不显示。有两种方法可以让他们显示:

  • 设置轴上的 axisPointer.show(例如 xAxis.axisPointer.show)为 true,则显示此轴的 axisPointer。
  • 设置 tooltip.trigger 设置为 'axis' 或者 tooltip.axisPointer.type 设置为 'cross',则此时坐标系会自动选择显示哪个轴的 axisPointer,也可以使用 tooltip.axisPointer.axis 改变这种选择。注意,轴上如果设置了 axisPointer,会覆盖此设置。

如何显示 axisPointer 的 label:

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

  • 设置轴上的 axisPointer.label.show(例如 xAxis.axisPointer.label.show)为 true,则显示此轴的 axisPointer 的 label。
  • 设置 tooltip.axisPointer.type 为 'cross' 时会自动显示 axisPointer 的 label。

关于触屏的 axisPointer 的设置

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

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

参见例子。

自动吸附到数据(snap)

对于数值轴、时间轴,如果开启了 snap,则 axisPointer 会自动吸附到最近的点上。

文章名称:创新互联ECharts教程:axisPointer配置项
分享路径:http://www.36103.cn/qtweb/news1/32201.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联