設(shè)置y軸坐標軸指示器的文本標簽

本節(jié)我們一起來學習 ECharts 中 yAxis 是如何設(shè)置其坐標軸指示器的文本標簽的。首先，需要將文本標簽顯示出來，使用的是 axisPointer.label.show，然后就可以對坐標軸指示器的文本標簽進行設(shè)置了，詳細內(nèi)容如下：

yAxis.axisPointer.label   |   Object

坐標軸指示器的文本標簽。

yAxis.axisPointer.label.show   |   boolean

[ default: false ]

是否顯示 y 軸坐標軸指示器的文本標簽。如果 tooltip.axisPointer.type 設(shè)置為 'cross' 則默認顯示標簽，否則默認不顯示。

yAxis.axisPointer.label.precision   |   number, string

[ default: 'auto' ]

yAxis 坐標軸指示器文本標簽中數(shù)值的小數(shù)點精度。默認根據(jù)當前軸的值自動判斷。也可以指定如 2 表示保留兩位小數(shù)。

yAxis.axisPointer.label.formatter   |   string, Function

[ default: null ]

坐標軸指示器文本標簽文字的格式化器。

• 如果為 string，可以是例如：
  

      formatter: 'some text {value} some text，其中 {value} 會被自動替換為軸的值。

• 如果為 function，可以是例如：
  

     參數(shù)：

        {Object} params: 含有：

        {Object} params.value: 軸當前值，如果 axis.type 為 'category' 時，其值為 axis.data 里的數(shù)值。如果 axis.type 為 'time'，其值為時間戳。

        {Array.<Object>} params.seriesData: 一個數(shù)組，是當前 axisPointer 最近的點的信息，每項內(nèi)容為：

{
    componentType: 'series',
    // 系列類型
    seriesType: string,
    // 系列在傳入的 option.series 中的 index
    seriesIndex: number,
    // 系列名稱
    seriesName: string,
    // 數(shù)據(jù)名，類目名
    name: string,
    // 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
    dataIndex: number,
    // 傳入的原始數(shù)據(jù)項
    data: Object,
    // 傳入的數(shù)據(jù)值
    value: number|Array,
    // 數(shù)據(jù)圖形的顏色
    color: string,

}

每項內(nèi)容還包括軸的信息：

{
    axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'
    axisId: 'xxx',
    axisName: 'xxx',
    axisIndex: 3,
    axisValue: 121, // 當前 axisPointer 對應的 value。
    axisValueLabel: '文本'
}

返回值：

顯示的 string。

例如：

formatter: function (params) {
    // 假設(shè)此軸的 type 為 'time'。
    return 'some text' + echarts.format.formatTime(params.value);
}

yAxis.axisPointer.label.margin   |   boolean

[ default: 3 ]

yAxis 坐標軸指示器的文本標簽距離 y 軸的距離。

yAxis.axisPointer.label.backgroundColor   |   string

[ default: 'auto' ]

yAxis 坐標軸指示器文本標簽的背景顏色，默認是和 axis.axisLine.lineStyle.color 相同。

yAxis.axisPointer.label.borderColor   |   string

[ default: null ]

yAxis 坐標軸指示器文本標簽的邊框顏色。

yAxis.axisPointer.label.borderWidth   |   string

[ default: 0 ]

yAxis 坐標軸指示器文本標簽的邊框?qū)挾取?/p>

yAxis.axisPointer.label.shadowBlur   |   number

[ default: 3 ]

yAxis 坐標軸指示器圖形陰影的模糊大小。

該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設(shè)置圖形的陰影效果。

示例：

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

yAxis.axisPointer.label.shadowColor   |   Color

[ default: #aaa ]

yAxis 坐標軸指示器陰影的顏色。支持的格式同color。

yAxis.axisPointer.label.shadowOffsetX   |   number

[ default: 0 ]

yAxis 坐標軸指示器陰影在水平方向上的偏移距離。

yAxis.axisPointer.label.shadowOffsetY   |   number

[ default: 0 ]

yAxis 坐標軸指示器陰影在垂直方向上的偏移距離。