ECharts箱形圖的使用

series[i]-boxplot

通過 Boxplot 可以設(shè)置 ECharts 的箱形圖，Boxplot 又被稱為：盒須圖、盒式圖、盒狀圖以及箱線圖，是一種用作顯示一組數(shù)據(jù)分散情況資料的統(tǒng)計圖。它能顯示出一組數(shù)據(jù)的最大值、最小值、中位數(shù)、下四分位數(shù)及上四分位數(shù)。

示例如下：

點擊編輯實例 》》

它也支持多個 series 在同一個坐標系中，參見 例子。

ECharts 箱形圖屬性

type 屬性

系列類型為 boxplot 以表示箱形圖。

coordinateSystem 屬性

該系列使用的坐標系，可選值：

• 'cartesian2d'使用二維的直角坐標系（也稱笛卡爾坐標系），通過 xAxisIndex、yAxisIndex指定相應(yīng)的坐標軸組件。

xAxisIndex 屬性

使用的 x 軸的 index，在單個圖表實例中存在多個 x 軸的時候有用。

yAxisIndex 屬性

使用的 y 軸的 index，在單個圖表實例中存在多個 y軸的時候有用。

name 屬性

系列名稱，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項時用于指定對應(yīng)的系列。

legendHoverLink 屬性

是否啟用圖例 hover 時的聯(lián)動高亮。為 boolean 類型的值，默認值為 true。

hoverAnimation 屬性

是否開啟 hover 在 box 上的動畫效果。為 boolean 類型的值，默認值為 true。

layout 屬性

布局方式，不設(shè)置時，取值為 null，可選值：

• 'horizontal'：水平排布各個 box。
• 'vertical'：豎直排布各個 box。

默認值根據(jù)當前坐標系狀況決定：如果 category 軸為橫軸，則水平排布；否則豎直排布；如果沒有 category 軸則水平排布。

boxWidth 屬性

box 的寬度的上下限。數(shù)組的意思是：[min, max]，默認值為：[7, 50]。

可以是絕對數(shù)值，如 [7, 50]，也可以是百分比，如 ['40%', '90%']。百分比的意思是，最大可能寬度（bandWidth）的百分之多少。

itemStyle 屬性

boxplot 圖形樣式，有 normal 和 emphasis 兩個狀態(tài)。normal 是圖形在默認狀態(tài)下的樣式；emphasis 是圖形在高亮狀態(tài)下的樣式，比如在鼠標懸浮或者圖例聯(lián)動高亮時。

dimensions 屬性

使用 dimensions 定義 data 每個維度的信息。例如：

series: {
    type: 'xxx',
    // 定義了每個維度的名稱。這個名稱會被顯示到默認的 tooltip 中。
    dimensions: ['date', 'open', 'close', 'highest', 'lowest']
    data: [
        // 有了上面 dimensions 定義后，下面這五個維度的名稱分別為：
        // 'date', 'open', 'close', 'highest', 'lowest'
        [12, 44, 55, 66, 2],
        [23, 6, 16, 23, 1],
        ...
    ]
}

series: {
    type: 'xxx',
    dimensions: [
        null,                // 如果此維度不想給出定義，則使用 null 即可
        {type: 'ordinal'},   // 只定義此維度的類型。
                             // 'ordinal' 表示離散型，一般文本使用這種類型。
                             // 如果類型沒有被定義，會自動猜測類型。
        {name: 'good', type: 'number'},
        'bad'                // 等同于 {name: 'bad'}
    ]
}

dimensions 數(shù)組中的每一項可以是：

• string，如 'someName'，等同于 {name: 'someName'}
• Object，屬性可以有：name: string。type: string，支持numberfloat，即 Float64Arrayint，即 Int32Arrayordinal，表示離散數(shù)據(jù)，一般指字符串。time，表示時間類型，時間類型的支持參見 data

值得一提的是，當定義了 dimensions 后，默認 tooltip 中對個維度的顯示，會變?yōu)椤贺Q排』，從而方便顯示每個維度的名稱。如果沒有定義 dimensions，則默認 tooltip 會橫排顯示，且只顯示數(shù)值沒有維度名稱可顯示。

encode 屬性

可以定義 data 的哪個維度被編碼成什么。比如：

series: {
    type: 'xxx',
    encode: {
        x: [3, 1, 5],      // 表示維度 3、1、5 映射到 x 軸。
        y: 2,              // 表示維度 2 映射到 y 軸。
        tooltip: [3, 2, 4] // 表示維度 3、2、4 會在 tooltip 中顯示。
        label: 3           // 表示 label 使用維度 3。
    },
    data: [
        // 每一列稱為一個『維度』。
        // 這里分別是維度 0、1、2、3、4。
        [12, 44, 55, 66, 2],
        [23, 6, 16, 23, 1],
        ...
    ]
}

encode 支持的屬性，根據(jù)坐標系不同而不同。 對于直角坐標系（cartesian2d），支持 x、y。 對于 極坐標系（polar），支持 radius、angle。 對于 地理坐標系（geo），支持 lng，lat。 此外，均支持 tooltip 和 label 和 itemName（用于指定 tooltip 中數(shù)據(jù)項名稱）。

當使用 dimensions 給維度定義名稱后，encode 中可直接引用名稱，例如：

series: {
    type: 'xxx',
    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
    encode: {
        x: 'date',
        y: ['open', 'close', 'highest', 'lowest']
    },
    data: [ ... ]
}

zlevel 屬性

盒須圖所有圖形的 zlevel 值。

zlevel 用于 Canvas 分層，不同 zlevel 值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段，默認的 zlevel 值為0。我們可以把一些圖形變化頻繁（例如有動畫）的組件設(shè)置成一個單獨的zlevel。需要注意的是過多的 Canvas 會引起內(nèi)存開銷的增大，在手機端上需要謹慎使用以防崩潰。

zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。

z 屬性

盒須圖組件的所有圖形的 z 值，默認的 z 值為2。控制圖形的前后順序。z 值小的圖形會被 z 值大的圖形覆蓋。

z相比zlevel優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。

silent 屬性

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

animationDuration 屬性

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

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

animationEasing 屬性

初始動畫的緩動效果，默認值為 elasticOut。不同的緩動效果可以參考 緩動示例。

animationDelay 屬性

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

如下示例：

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

也可以看該示例