ECharts 入门教程 ECharts全局坐标轴指示器的属性设置

2024-02-25 开发教程 ECharts 入门教程匿名 11℃

axisPointer.show | boolean

[ default: false ]

是否显示坐标轴指示器，默认为不显示。但是如果 tooltip.trigger 设置为 'axis' ，或者 tooltip.axisPointer.type 设置为 'cross'，则自动显示 axisPointer。

坐标系会自动选择显示显示哪个轴的 axisPointer，也可以使用 tooltip.axisPointer.axis 改变这种选择。

axisPointer.type | string

[ default: 'line' ]

ECharts 坐标轴指示器的类型。

可选：

'line' 直线指示器
'shadow' 阴影指示器

axisPointer.snap | boolean

坐标轴指示器是否自动吸附到点上。默认自动判断。

这个功能在数值轴和时间轴上比较有意义，可以自动寻找细小的数值点。

axisPointer.z | number

坐标轴指示器的 z 值。控制图形的前后顺序。

z 值小的图形会被 z 值大的图形覆盖。

axisPointer.triggerTooltip | boolean

[ default: true ]

坐标轴指示器是否触发 tooltip。如果不想触发 tooltip 可以关掉。

axisPointer.value | number

[ default: null ]

坐标轴指示器当前的 value。在使用 axisPointer.handle 时，可以设置此值进行初始值设定，从而决定 axisPointer 的初始位置。

axisPointer.status | boolean

坐标轴指示器当前的状态，可取值为 'show' 和 'hide'。

axisPointer.link | Array

设置不同轴的 axisPointer 可以进行的联动。联动表示轴能同步一起活动。轴依据他们的 axisPointer 当前对应的值来联动。

联动的效果可以看这两个例子：例子A，例子B。

link 是一个数组，其中每一项表示一个 link group，一个 group 中的坐标轴互相联动。例如：

link: [
    {
        // 表示所有 xAxisIndex 为 0、3、4 和 yAxisName 为 'someName' 的坐标轴联动。
        xAxisIndex: [0, 3, 4],
        yAxisName: 'someName'
    },
    {
        // 表示左右 xAxisId 为 'aa'、'cc' 以及所有的 angleAxis 联动。
        xAxisId: ['aa', 'cc'],
        angleAxis: 'all'
    },
    ...
]

如上所示，每个 link group 中可以用这些方式引用坐标轴：

{
    // 以下的 'some' 均表示轴的维度，也就是表示 'x', 'y', 'radius', 'angle', 'single'
    someAxisIndex: [...], // 可以是一个数组或单值或 'all'
    someAxisName: [...],  // 可以是一个数组或单值或 'all'
    someAxisId: [...],    // 可以是一个数组或单值或 'all'
}

如何联动不同类型（axis.type）的轴？

如果 axis 的类型不同，比如 axisA type 为 'category'，axisB type 为 'time'，可以在每个 link group 中写转换函数（mapper）来进行值的转换，例如：

link: [{
    xAxisIndex: [0, 1],
    yAxisName: ['yy'],
    mapper: function (sourceVal, sourceAxisInfo, targetAxisInfo) {
        if (sourceAxisInfo.axisName === 'yy') {
            // from timestamp to '2012-02-05'
            return echarts.format.formatTime('yyyy-MM-dd', sourceVal);
        }
        else if (targetAxisInfo.axisName === 'yy') {
            // from '2012-02-05' to date
            return echarts.number.parseDate(dates[sourceVal]);
        }
        else {
            return sourceVal;
        }
    }
}]

mapper 的输入参数：

{number} sourceVal

{Object} sourceAxisInfo 里面包含 {axisDim, axisId, axisName, axisIndex} 等信息

{Object} targetAxisInfo 里面包含 {axisDim, axisId, axisName, axisIndex} 等信息

mapper 的返回值：

{number} 转换结果

axisPointer.triggerOn | string

[ default: 'mousemove|click' ]

坐标轴指示器中提示框触发的条件，可选：

'mousemove'：鼠标移动时触发。
'click'：鼠标点击时触发。
'none'：不在 'mousemove' 或 'click' 时触发。

上一节：设置ECharts的全局坐标轴指示器

下一节：设置ECharts坐标轴指示器的文本标签

"ECharts 入门教程"的目录