建站
咨詢
售后
建站咨詢
新聞中心
series[i]-boxplot
通過(guò) Boxplot 可以設(shè)置 ECharts 的箱形圖，Boxplot 又被稱為：盒須圖、盒式圖、盒狀圖以及箱線圖，是一種用作顯示一組數(shù)據(jù)分散情況資料的統(tǒng)計(jì)圖。它能顯示出一組數(shù)據(jù)的最大值、最小值、中位數(shù)、下四分位數(shù)及上四分位數(shù)。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請(qǐng)、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、圖們網(wǎng)站維護(hù)、網(wǎng)站推廣。
示例如下：
點(diǎn)擊編輯實(shí)例 》》
它也支持多個(gè) series 在同一個(gè)坐標(biāo)系中，參見(jiàn) 例子。
ECharts 箱形圖屬性
type 屬性系列類型為 boxplot 以表示箱形圖。
coordinateSystem 屬性該系列使用的坐標(biāo)系，可選值：
- 'cartesian2d'使用二維的直角坐標(biāo)系（也稱笛卡爾坐標(biāo)系），通過(guò) xAxisIndex、yAxisIndex指定相應(yīng)的坐標(biāo)軸組件。
xAxisIndex 屬性使用的 x 軸的 index，在單個(gè)圖表實(shí)例中存在多個(gè) x 軸的時(shí)候有用。
yAxisIndex 屬性使用的 y 軸的 index，在單個(gè)圖表實(shí)例中存在多個(gè) y軸的時(shí)候有用。
name 屬性系列名稱，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列。
legendHoverLink 屬性是否啟用圖例 hover 時(shí)的聯(lián)動(dòng)高亮。為 boolean 類型的值，默認(rèn)值為 true。
hoverAnimation 屬性是否開(kāi)啟 hover 在 box 上的動(dòng)畫(huà)效果。為 boolean 類型的值，默認(rèn)值為 true。
layout 屬性布局方式，不設(shè)置時(shí)，取值為 null，可選值：
- 'horizontal'：水平排布各個(gè) box。
- 'vertical'：豎直排布各個(gè) box。
默認(rèn)值根據(jù)當(dāng)前坐標(biāo)系狀況決定：如果 category 軸為橫軸，則水平排布；否則豎直排布；如果沒(méi)有 category 軸則水平排布。
boxWidth 屬性box 的寬度的上下限。數(shù)組的意思是：[min, max]，默認(rèn)值為：[7, 50]。
可以是絕對(duì)數(shù)值，如 [7, 50]，也可以是百分比，如 ['40%', '90%']。百分比的意思是，最大可能寬度（bandWidth）的百分之多少。
itemStyle 屬性boxplot 圖形樣式，有 normal 和 emphasis 兩個(gè)狀態(tài)。normal 是圖形在默認(rèn)狀態(tài)下的樣式；emphasis 是圖形在高亮狀態(tài)下的樣式，比如在鼠標(biāo)懸浮或者圖例聯(lián)動(dòng)高亮?xí)r。
dimensions 屬性使用 dimensions 定義 data 每個(gè)維度的信息。例如：
series: {
type: 'xxx',
// 定義了每個(gè)維度的名稱。這個(gè)名稱會(huì)被顯示到默認(rèn)的 tooltip 中。
dimensions: ['date', 'open', 'close', 'highest', 'lowest']
data: [
// 有了上面 dimensions 定義后，下面這五個(gè)維度的名稱分別為：
// 'date', 'open', 'close', 'highest', 'lowest'
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
...
]
}series: {
type: 'xxx',
dimensions: [
null, // 如果此維度不想給出定義，則使用 null 即可
{type: 'ordinal'}, // 只定義此維度的類型。
// 'ordinal' 表示離散型，一般文本使用這種類型。
// 如果類型沒(méi)有被定義，會(huì)自動(dòng)猜測(cè)類型。
{name: 'good', type: 'number'},
'bad' // 等同于 {name: 'bad'}
]
}dimensions 數(shù)組中的每一項(xiàng)可以是：
- string，如 'someName'，等同于 {name: 'someName'}
- Object，屬性可以有：name: string。type: string，支持numberfloat，即 Float64Arrayint，即 Int32Arrayordinal，表示離散數(shù)據(jù)，一般指字符串。time，表示時(shí)間類型，時(shí)間類型的支持參見(jiàn) data
值得一提的是，當(dāng)定義了 dimensions 后，默認(rèn) tooltip 中對(duì)個(gè)維度的顯示，會(huì)變?yōu)椤贺Q排』，從而方便顯示每個(gè)維度的名稱。如果沒(méi)有定義 dimensions，則默認(rèn) tooltip 會(huì)橫排顯示，且只顯示數(shù)值沒(méi)有維度名稱可顯示。
encode 屬性可以定義 data 的哪個(gè)維度被編碼成什么。比如：
series: {
type: 'xxx',
encode: {
x: [3, 1, 5], // 表示維度 3、1、5 映射到 x 軸。
y: 2, // 表示維度 2 映射到 y 軸。
tooltip: [3, 2, 4] // 表示維度 3、2、4 會(huì)在 tooltip 中顯示。
label: 3 // 表示 label 使用維度 3。
},
data: [
// 每一列稱為一個(gè)『維度』。
// 這里分別是維度 0、1、2、3、4。
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
...
]
}encode 支持的屬性，根據(jù)坐標(biāo)系不同而不同。 對(duì)于直角坐標(biāo)系（cartesian2d），支持 x、y。 對(duì)于 極坐標(biāo)系（polar），支持 radius、angle。 對(duì)于 地理坐標(biāo)系（geo），支持 lng，lat。 此外，均支持 tooltip 和 label 和 itemName（用于指定 tooltip 中數(shù)據(jù)項(xiàng)名稱）。
當(dāng)使用 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 值的圖形會(huì)放置在不同的 Canvas 中，Canvas 分層是一種常見(jiàn)的優(yōu)化手段，默認(rèn)的 zlevel 值為0。我們可以把一些圖形變化頻繁（例如有動(dòng)畫(huà)）的組件設(shè)置成一個(gè)單獨(dú)的zlevel。需要注意的是過(guò)多的 Canvas 會(huì)引起內(nèi)存開(kāi)銷的增大，在手機(jī)端上需要謹(jǐn)慎使用以防崩潰。
zlevel 大的 Canvas 會(huì)放在 zlevel 小的 Canvas 的上面。
z 屬性盒須圖組件的所有圖形的 z 值，默認(rèn)的 z 值為2?？刂茍D形的前后順序。z 值小的圖形會(huì)被 z 值大的圖形覆蓋。
z相比zlevel優(yōu)先級(jí)更低，而且不會(huì)創(chuàng)建新的 Canvas。
silent 屬性圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件，默認(rèn)為 false，即響應(yīng)和觸發(fā)鼠標(biāo)事件。
animationDuration 屬性初始動(dòng)畫(huà)的時(shí)長(zhǎng)，默認(rèn)時(shí)長(zhǎng)為 800，支持回調(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)值為 elasticOut。不同的緩動(dòng)效果可以參考 緩動(dòng)示例。
animationDelay 屬性初始動(dòng)畫(huà)的延遲，默認(rèn)為 0，支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫(huà)效果。
如下示例：
animationDelay: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}也可以看該示例
本文題目：創(chuàng)新互聯(lián)ECharts教程：ECharts箱形圖的使用
標(biāo)題網(wǎng)址：http://www.5511xx.com/article/cddisij.html
