ECharts柱狀圖的標(biāo)注如何實現(xiàn)

ECharts 中使用 markPoint 可以控制柱狀圖的標(biāo)注。

series[i]-bar.markPoint

設(shè)置 ECharts 柱狀圖標(biāo)注，這是一個 Object。

series[i]-bar.markPoint.symbol

[ default: 'pin' ]

柱狀圖標(biāo)注的圖形設(shè)置，取值類型為 string。

ECharts 提供的標(biāo)記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

可以通過 'image://url' 設(shè)置為圖片，其中 url 為圖片的鏈接，或者 dataURI；

也可以通過 'path://' 將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因為縮放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會自適應(yīng)調(diào)整為合適的大小。路徑的格式參見 SVG PathData。可以從 Adobe Illustrator 等工具編輯導(dǎo)出。

series[i]-bar.markPoint.symbolSize 

[ default: 50 ]

柱狀圖標(biāo)注的大小，值類型為 number、Array、Function；可以設(shè)置成諸如 10 這樣單一的數(shù)字，也可以用數(shù)組分開表示寬和高，例如 [20, 10] 表示標(biāo)記寬為20，高為10。

如果需要每個數(shù)據(jù)的圖形大小不一樣，可以設(shè)置為如下格式的回調(diào)函數(shù)：

(value: Array|number, params: Object) => number|Array

其中第一個參數(shù) value 為 data 中的數(shù)據(jù)值。第二個參數(shù) params 是其它的數(shù)據(jù)項參數(shù)。

series[i]-bar.markPoint.symbolRotate number

柱狀圖標(biāo)注的旋轉(zhuǎn)角度，值類型為 number。

注意：在 markLine 中當(dāng) symbol 為 'arrow' 時會忽略 symbolRotate 強制設(shè)置為切線的角度。

series[i]-bar.markPoint.symbolOffset 

[ default: [0, 0] ]

柱狀圖標(biāo)注相對于原本位置的偏移，值類型為 Array。默認情況下，標(biāo)記會居中置放在數(shù)據(jù)對應(yīng)的位置，但是如果 symbol 是自定義的矢量路徑或者圖片，就有可能不希望 symbol 居中。這時候可以使用該配置項配置 symbol 相對于原本居中的偏移，可以是絕對的像素值，也可以是相對的百分比。

例如： [0, '50%'] 就是把自己向上移動了一半的位置，在 symbol 圖形是氣泡的時候可以讓圖形下端的箭頭對準(zhǔn)數(shù)據(jù)點。

series[i]-bar.markPoint.silent

[ default: false ]

柱狀圖的圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件，是 boolean 值，默認為 false，即響應(yīng)和觸發(fā)鼠標(biāo)事件。

series[i]-bar.markPoint.label

柱狀圖標(biāo)注的文本，為 Object。

series[i]-bar.markPoint.itemStyle

柱狀圖標(biāo)注的樣式，為 Object。

series[i]-bar.markPoint.data[i] 

柱狀圖標(biāo)注的數(shù)據(jù)數(shù)組，為 Object。每個數(shù)組項是一個對象，有下面幾種方式指定標(biāo)注的位置。

1. 通過 x, y 屬性指定相對容器的屏幕坐標(biāo)，單位像素，支持百分比。
2. 用 coord 屬性指定數(shù)據(jù)在相應(yīng)坐標(biāo)系上的坐標(biāo)位置，單個維度支持設(shè)置 'min', 'max', 'average'。
3. 直接用 type 屬性標(biāo)注系列中的最大值，最小值。這時候可以使用 valueIndex 指定是在哪個維度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪個維度上的最大值、最小值、平均值。

當(dāng)多個屬性同時存在時，優(yōu)先級按上述的順序。

示例：

data: [
    {
        name: '最大值',
        type: 'max'
    }, 
    {
        name: '某個坐標(biāo)',
        coord: [10, 20]
    }, {
        name: '固定 x 像素位置',
        yAxis: 10,
        x: '90%'
    }, 
    {
        name: '某個屏幕坐標(biāo)',
        x: 100,
        y: 100
    }
]

series[i]-bar.markPoint.animation

[ default: true ]

柱狀圖標(biāo)注是否開啟動畫，值類型為 boolean，默認開啟。

series[i]-bar.markPoint.animationThreshold 

[ default: 2000 ]

是否開啟動畫的閾值，值類型為 number，當(dāng)單個系列顯示的圖形數(shù)量大于這個閾值時會關(guān)閉動畫。

series[i]-bar.markPoint.animationDuration

[ default: 1000 ]

初始動畫的時長，值類型為 number，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果：

animationDuration: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

series[i]-bar.markPoint.animationEasing 

[ default: cubicOut ]

初始動畫的緩動效果，值類型為 string。不同的緩動效果可以參考 緩動示例。

series[i]-bar.markPoint.animationDelay 

[ default: 0 ]

初始動畫的延遲，值類型為 number、Function支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果。

如下示例：

animationDelay: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

也可以看該示例

series[i]-bar.markPoint.animationDurationUpdate 

[ default: 300 ]

數(shù)據(jù)更新動畫的時長，值類型為 number、Function。

支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果：

animationDurationUpdate: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

series[i]-bar.markPoint.animationEasingUpdate 

[ default: cubicOut ]

數(shù)據(jù)更新動畫的緩動效果，值類型為 string。

series[i]-bar.markPoint.animationDelayUpdate 

[ default: 0 ]

數(shù)據(jù)更新動畫的延遲，值類型為 number、Function；支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果。

如下示例：

animationDelayUpdate: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

也可以看該示例