設(shè)置ECharts箱形圖的標(biāo)注

2018-11-13 10:08 更新

series[i]-boxplot.markPoint

通過(guò) markPoint 設(shè)置 ECharts 箱形圖的標(biāo)注。

symbol

用于標(biāo)注標(biāo)記的圖形,默認(rèn)為 pin。

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

也可以通過(guò) 'image://url' 設(shè)置為圖片,其中 url 為圖片的鏈接,或者 dataURI。

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

symbolSize

標(biāo)記的大小,可以設(shè)置成諸如 10 這樣單一的數(shù)字(默認(rèn)的數(shù)值值為 50),也可以用數(shù)組分開(kāi)表示寬和高,例如 [20, 10] 表示標(biāo)記寬為20,高為10。

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

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

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

symbolRotate

標(biāo)記的旋轉(zhuǎn)角度。注意在 markLine 中當(dāng) symbol 為 'arrow' 時(shí)會(huì)忽略 symbolRotate 強(qiáng)制設(shè)置為切線(xiàn)的角度。

symbolOffset

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

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

silent

圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件,默認(rèn)為 false,即響應(yīng)和觸發(fā)鼠標(biāo)事件。

label

標(biāo)注的文本。

itemStyle

標(biāo)注的樣式。

data[i]

標(biāo)注的數(shù)據(jù)數(shù)組。每個(gè)數(shù)組項(xiàng)是一個(gè)對(duì)象,有下面幾種方式指定標(biāo)注的位置。

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

當(dāng)多個(gè)屬性同時(shí)存在時(shí),優(yōu)先級(jí)按上述的順序。

示例:

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

是否開(kāi)啟動(dòng)畫(huà)。默認(rèn)為 true,即開(kāi)啟動(dòng)畫(huà)。

animationThreshold

是否開(kāi)啟動(dòng)畫(huà)的閾值,當(dāng)單個(gè)系列顯示的圖形數(shù)量大于這個(gè)閾值時(shí)會(huì)關(guān)閉動(dòng)畫(huà)。默認(rèn)閾值為 2000。

animationDuration

初始動(dòng)畫(huà)的時(shí)長(zhǎng),默認(rèn)值為 1000,支持回調(diào)函數(shù),可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫(huà)效果:

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

初始動(dòng)畫(huà)的緩動(dòng)效果,默認(rèn)值為 cubicOut。不同的緩動(dòng)效果可以參考 緩動(dòng)示例。

animationDelay

初始動(dòng)畫(huà)的延遲,支持回調(diào)函數(shù),可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫(huà)效果。

如下示例:

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

也可以看該示例

animationDurationUpdate

數(shù)據(jù)更新動(dòng)畫(huà)的時(shí)長(zhǎng),默認(rèn)值為 300。

支持回調(diào)函數(shù),可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫(huà)效果:

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

數(shù)據(jù)更新動(dòng)畫(huà)的緩動(dòng)效果,默認(rèn)值為 cubicOut。

animationDelayUpdate

數(shù)據(jù)更新動(dòng)畫(huà)的延遲,支持回調(diào)函數(shù),可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫(huà)效果。

如下示例:

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

也可以看該示例

以上內(nèi)容是否對(duì)您有幫助:
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)