Echarts配置项-4

配置项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.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 一直显示）。

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

---

自动吸附到数据（snap）

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

---

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

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

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

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

---

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