Echarts中自定義座標軸指示器之時間座標軸

Echarts中自定義座標軸指示器之時間座標軸

示例如下：

 配置如下：

const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985',
                // 自定義座標軸指示器之時間格式
                formatter: function(params) {
                    let value = params.value
                    if (params.axisDimension === 'x') {
                        const datetime = new Date(params.value),
                        Y = datetime.getFullYear(),
                        M = datetime.getMonth() + 1,
                        D = datetime.getDate(),
                        H = datetime.getHours()
                        value = Y + '-' + M + '-' + D + ' ' + H + ':00:00'
                    } else if (params.axisDimension === 'y') {
                        value = params.value.toFixed(2)
                    }
                    return value
                }
            }
        }
    }
}

formatter可以是一個字符串模板，也可以是一個回調方法，這是使用回調方法來對x軸和y軸的數據進行格式化轉換。

首先看一下formatter中參數params的數據格式：

{
    axisDimension: 'x',
    axisIndex: 0,
    seriesData: [
        {
            $val: ['seriesName','name','value'],
            borderColor: undefined,
            color: "#c23531",
            componentIndex: 0,
            componentSubType: "line",
            componentType: "series",
            data: { value: ["2020-01-01 03:00:00", 3] },
            dataIndex: 3,
            dataType: undefined,
            dimensionNames: ["x", "y", "__ecstackresult", "__ecstackedover"],
            encode: { x: [0], y: [1] },
            marker: "<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#c23531;"></span>",
            name: "",
            seriesId: "郵件營銷0",
            seriesIndex: 0,
            seriesName: "郵件營銷",
            seriesType: "line",
            value: ["2020-01-01 03:00:00", 3]
        }
    ],
    value: 1577818800000
}

通過axisDimension屬性來判斷指示器對應的哪個座標軸的值，從而對每個座標軸的值進行格式轉換，轉換成自己想要的現實格式。