ECharts全局坐標(biāo)軸指示器的屬性設(shè)置

2018-09-21 11:39 更新

axisPointer.show   |   boolean

[ default: false ]

是否顯示坐標(biāo)軸指示器,默認(rèn)為不顯示。但是如果 tooltip.trigger 設(shè)置為 'axis' ,或者 tooltip.axisPointer.type 設(shè)置為 'cross',則自動(dòng)顯示 axisPointer。

坐標(biāo)系會(huì)自動(dòng)選擇顯示顯示哪個(gè)軸的 axisPointer,也可以使用 tooltip.axisPointer.axis 改變這種選擇。

axisPointer.type   |   string

[ default: 'line' ]

ECharts 坐標(biāo)軸指示器的類型。

可選:

  • 'line' 直線指示器
  • 'shadow' 陰影指示器

axisPointer.snap   |   boolean

坐標(biāo)軸指示器是否自動(dòng)吸附到點(diǎn)上。默認(rèn)自動(dòng)判斷。

這個(gè)功能在數(shù)值軸和時(shí)間軸上比較有意義,可以自動(dòng)尋找細(xì)小的數(shù)值點(diǎn)。

axisPointer.z   |   number

坐標(biāo)軸指示器的 z 值??刂茍D形的前后順序。

z 值小的圖形會(huì)被 z 值大的圖形覆蓋。

axisPointer.triggerTooltip   |   boolean

[ default: true ]

坐標(biāo)軸指示器是否觸發(fā) tooltip。如果不想觸發(fā) tooltip 可以關(guān)掉。

axisPointer.value   |   number

[ default: null ]

坐標(biāo)軸指示器當(dāng)前的 value。在使用 axisPointer.handle 時(shí),可以設(shè)置此值進(jìn)行初始值設(shè)定,從而決定 axisPointer 的初始位置。

axisPointer.status   |   boolean

坐標(biāo)軸指示器當(dāng)前的狀態(tài),可取值為 'show' 和 'hide'。

axisPointer.link   |   Array

設(shè)置不同軸的 axisPointer 可以進(jìn)行的聯(lián)動(dòng)。聯(lián)動(dòng)表示軸能同步一起活動(dòng)。軸依據(jù)他們的 axisPointer 當(dāng)前對應(yīng)的值來聯(lián)動(dòng)。

聯(lián)動(dòng)的效果可以看這兩個(gè)例子:例子A,例子B

link 是一個(gè)數(shù)組,其中每一項(xiàng)表示一個(gè) link group,一個(gè) group 中的坐標(biāo)軸互相聯(lián)動(dòng)。例如:

link: [
    {
        // 表示所有 xAxisIndex 為 0、3、4 和 yAxisName 為 'someName' 的坐標(biāo)軸聯(lián)動(dòng)。
        xAxisIndex: [0, 3, 4],
        yAxisName: 'someName'
    },
    {
        // 表示左右 xAxisId 為 'aa'、'cc' 以及所有的 angleAxis 聯(lián)動(dòng)。
        xAxisId: ['aa', 'cc'],
        angleAxis: 'all'
    },
    ...
]

如上所示,每個(gè) link group 中可以用這些方式引用坐標(biāo)軸:

{
    // 以下的 'some' 均表示軸的維度,也就是表示 'x', 'y', 'radius', 'angle', 'single'
    someAxisIndex: [...], // 可以是一個(gè)數(shù)組或單值或 'all'
    someAxisName: [...],  // 可以是一個(gè)數(shù)組或單值或 'all'
    someAxisId: [...],    // 可以是一個(gè)數(shù)組或單值或 'all'
}

如何聯(lián)動(dòng)不同類型(axis.type)的軸?

如果 axis 的類型不同,比如 axisA type 為 'category',axisB type 為 'time',可以在每個(gè) link group 中寫轉(zhuǎn)換函數(shù)(mapper)來進(jìn)行值的轉(zhuǎn)換,例如:

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 的輸入?yún)?shù):

{number} sourceVal

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

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

mapper 的返回值:

{number} 轉(zhuǎn)換結(jié)果

axisPointer.triggerOn   |   string

[ default: 'mousemove|click' ]

坐標(biāo)軸指示器中提示框觸發(fā)的條件,可選:

  • 'mousemove':鼠標(biāo)移動(dòng)時(shí)觸發(fā)。
  • 'click':鼠標(biāo)點(diǎn)擊時(shí)觸發(fā)。
  • 'none':不在 'mousemove' 或 'click' 時(shí)觸發(fā)。
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號