新聞中心
ECharts 象形柱圖屬性
type
在象形柱圖中 type 屬性值為 'pictorialBar'。

name
系列名稱,用于tooltip的顯示,legend 的圖例篩選,在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列。
legendHoverLink
是否啟用圖例 hover 時(shí)的聯(lián)動(dòng)高亮,默認(rèn)為 true。
coordinateSystem
該系列使用的坐標(biāo)系,可選的值:
- 'cartesian2d'使用二維的直角坐標(biāo)系(也稱笛卡爾坐標(biāo)系),通過 xAxisIndex, yAxisIndex指定相應(yīng)的坐標(biāo)軸組件。
xAxisIndex
使用的 x 軸的 index,在單個(gè)圖表實(shí)例中存在多個(gè) x 軸的時(shí)候有用。
yAxisIndex
使用的 y 軸的 index,在單個(gè)圖表實(shí)例中存在多個(gè) y軸的時(shí)候有用。
cursor
鼠標(biāo)懸浮時(shí)在圖形元素上時(shí)鼠標(biāo)的樣式是什么,默認(rèn)為 'pointer'。同 CSS 的 cursor。
label
圖形上的文本標(biāo)簽,可用于說明圖形的一些數(shù)據(jù)信息,比如值,名稱等,label選項(xiàng)在 ECharts 2.x 中放置于itemStyle.normal下,在 ECharts 3 中為了讓整個(gè)配置項(xiàng)結(jié)構(gòu)更扁平合理,label 被拿出來跟 itemStyle 平級(jí),并且跟 itemStyle 一樣擁有 normal, emphasis 兩個(gè)狀態(tài)。
itemStyle
圖形樣式,有 normal 和 emphasis 兩個(gè)狀態(tài)。normal 是圖形在默認(rèn)狀態(tài)下的樣式;emphasis 是圖形在高亮狀態(tài)下的樣式,比如在鼠標(biāo)懸浮或者圖例聯(lián)動(dòng)高亮?xí)r。
barWidth
柱條的寬度,不設(shè)時(shí)自適應(yīng)。支持設(shè)置成相對(duì)于類目寬度的百分比。
在同一坐標(biāo)系上,此屬性會(huì)被多個(gè) 'pictorialBar' 系列共享。此屬性應(yīng)設(shè)置于此坐標(biāo)系中最后一個(gè) 'pictorialBar' 系列上才會(huì)生效,并且是對(duì)此坐標(biāo)系中所有 'pictorialBar' 系列生效。
barMaxWidth
柱條的最大寬度,不設(shè)時(shí)自適應(yīng)。支持設(shè)置成相對(duì)于類目寬度的百分比。
在同一坐標(biāo)系上,此屬性會(huì)被多個(gè) 'pictorialBar' 系列共享。此屬性應(yīng)設(shè)置于此坐標(biāo)系中最后一個(gè) 'pictorialBar' 系列上才會(huì)生效,并且是對(duì)此坐標(biāo)系中所有 'pictorialBar' 系列生效。
barMinHeight
柱條最小高度,可用于防止某數(shù)據(jù)項(xiàng)的值過小而影響交互。
barGap
柱間距離,可設(shè)固定值(如 20)或者百分比(如 '30%',表示柱子寬度的 30%)。默認(rèn)為-100%
如果想要兩個(gè)系列的柱子重疊,可以設(shè)置 barGap 為 '-100%'。這在用柱子做背景的時(shí)候有用。
在同一坐標(biāo)系上,此屬性會(huì)被多個(gè) 'pictorialBar' 系列共享。此屬性應(yīng)設(shè)置于此坐標(biāo)系中最后一個(gè) 'pictorialBar' 系列上才會(huì)生效,并且是對(duì)此坐標(biāo)系中所有 'pictorialBar' 系列生效。
例子:
點(diǎn)擊編輯實(shí)例 》》
barCategoryGap
類目間柱形距離,默認(rèn)為類目間距的20%,可設(shè)固定值
在同一坐標(biāo)系上,此屬性會(huì)被多個(gè) 'pictorialBar' 系列共享。此屬性應(yīng)設(shè)置于此坐標(biāo)系中最后一個(gè) 'pictorialBar' 系列上才會(huì)生效,并且是對(duì)此坐標(biāo)系中所有 'pictorialBar' 系列生效。
symbol
圖形類型。
ECharts 提供的標(biāo)記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
也可以通過 'image://url' 設(shè)置為圖片,其中 url 為圖片的鏈接,或者 dataURI。
可以通過 'path://' 將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式,不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊,而且可以設(shè)置為任意顏色。路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。路徑的格式參見 SVG PathData??梢詮?Adobe Illustrator 等工具編輯導(dǎo)出。
例子:
點(diǎn)擊編輯實(shí)例 》》
此屬性可以被設(shè)置在系列的 根部,表示對(duì)此系列中所有數(shù)據(jù)都生效;也可以被設(shè)置在 data 中的 每個(gè)數(shù)據(jù)項(xiàng)中,表示只對(duì)此數(shù)據(jù)項(xiàng)生效。
例如:
series: [{
symbol: ... // 對(duì) data 中所有數(shù)據(jù)項(xiàng)生效。
data: [23, 56]
}]
或者
series: [{
data: [{
value: 23
symbol: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}, {
value: 56
symbol: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}]
}]
symbolSize
圖形的大小。默認(rèn)為 ['100%', '100%']。
可以用數(shù)組分開表示寬和高,例如 [20, 10] 表示標(biāo)記寬為20,高為10,也可以設(shè)置成諸如 10 這樣單一的數(shù)字,表示 [10, 10]。
可以設(shè)置成絕對(duì)值(如 10),也可以設(shè)置成百分比(如 '120%'、['55%', 23])。
當(dāng)設(shè)置為百分比時(shí),圖形的大小是基于 基準(zhǔn)柱 的尺寸計(jì)算出來的。
例如,當(dāng)基準(zhǔn)柱基于 x 軸(即柱子是縱向的),symbolSize 設(shè)置為 ['30%', '50%'],那么最終圖形的尺寸是:
- 寬度:基準(zhǔn)柱的寬度 * 30%。
- 高度:如果 symbolRepeat 為 false:基準(zhǔn)柱的高度 * 50%。如果 symbolRepeat 為 true:基準(zhǔn)柱的寬度 * 50%。
基準(zhǔn)柱基于 y 軸(即柱子是橫向的)的情況類似對(duì)調(diào)可得出。
例子:
點(diǎn)擊編輯實(shí)例 》》
此屬性可以被設(shè)置在系列的 根部,表示對(duì)此系列中所有數(shù)據(jù)都生效;也可以被設(shè)置在 data 中的 每個(gè)數(shù)據(jù)項(xiàng)中,表示只對(duì)此數(shù)據(jù)項(xiàng)生效。
例如:
series: [{
symbolSize: ... // 對(duì) data 中所有數(shù)據(jù)項(xiàng)生效。
data: [23, 56]
}]
或者
series: [{
data: [{
value: 23
symbolSize: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}, {
value: 56
symbolSize: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}]
}]
symbolPosition
圖形的定位位置??扇≈担?/p>
- 'start'(默認(rèn)):圖形邊緣與柱子開始的地方內(nèi)切。
- 'end':圖形邊緣與柱子結(jié)束的地方內(nèi)切。
- 'center':圖形在柱子里居中。
例子:
點(diǎn)擊編輯實(shí)例 》》
此屬性可以被設(shè)置在系列的 根部,表示對(duì)此系列中所有數(shù)據(jù)都生效;也可以被設(shè)置在 data 中的 每個(gè)數(shù)據(jù)項(xiàng)中,表示只對(duì)此數(shù)據(jù)項(xiàng)生效。
例如:
series: [{
symbolPosition: ... // 對(duì) data 中所有數(shù)據(jù)項(xiàng)生效。
data: [23, 56]
}]
或者:
series: [{
data: [{
value: 23
symbolPosition: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}, {
value: 56
symbolPosition: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}]
}]
symbolOffset
圖形相對(duì)于原本位置的偏移。symbolOffset 是圖形定位中最后計(jì)算的一個(gè)步驟,可以對(duì)圖形計(jì)算出來的位置進(jìn)行微調(diào)。
可以設(shè)置成絕對(duì)值(如 10),也可以設(shè)置成百分比(如 '120%'、['55%', 23])。
當(dāng)設(shè)置為百分比時(shí),表示相對(duì)于自身尺寸 symbolSize 的百分比。
例如 [0, '-50%'] 就是把圖形向上移動(dòng)了自身尺寸的一半的位置。
此屬性可以被設(shè)置在系列的根部,表示對(duì)此系列中所有數(shù)據(jù)都生效;也可以被設(shè)置在 data 中的 每個(gè)數(shù)據(jù)項(xiàng)中,表示只對(duì)此數(shù)據(jù)項(xiàng)生效。
例如:
series: [{
symbolOffset: ... // 對(duì) data 中所有數(shù)據(jù)項(xiàng)生效。
data: [23, 56]
}]
或者:
series: [{
data: [{
value: 23
symbolOffset: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}, {
value: 56
symbolOffset: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}]
}]
symbolRotate
圖形的旋轉(zhuǎn)角度。
注意,symbolRotate 并不會(huì)影響圖形的定位(哪怕超出基準(zhǔn)柱的邊界),而只是單純得繞自身中心旋轉(zhuǎn)。
此屬性可以被設(shè)置在系列的根部,表示對(duì)此系列中所有數(shù)據(jù)都生效;也可以被設(shè)置在 data 中的每個(gè)數(shù)據(jù)項(xiàng)中,表示只對(duì)此數(shù)據(jù)項(xiàng)生效。
例如:
series: [{
symbolRotate: ... // 對(duì) data 中所有數(shù)據(jù)項(xiàng)生效。
data: [23, 56]
}]
或者:
series: [{
data: [{
value: 23
symbolRotate: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}, {
value: 56
symbolRotate: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}]
}]
symbolRepeat
指定圖形元素是否重復(fù)。值可為:
- false/null/undefined:不重復(fù),即每個(gè)數(shù)據(jù)值用一個(gè)圖形元素表示。
- true:使圖形元素重復(fù),即每個(gè)數(shù)據(jù)值用一組重復(fù)的圖形元素表示。重復(fù)的次數(shù)依據(jù) data 計(jì)算得到。
- a number:使圖形元素重復(fù),即每個(gè)數(shù)據(jù)值用一組重復(fù)的圖形元素表示。重復(fù)的次數(shù)是給定的定值。
- 'fixed':使圖形元素重復(fù),即每個(gè)數(shù)據(jù)值用一組重復(fù)的圖形元素表示。重復(fù)的次數(shù)依據(jù) symbolBoundingData 計(jì)算得到,即與 data 無關(guān)。這在此圖形被用于做背景時(shí)有用。
例子:
點(diǎn)擊編輯實(shí)例 》》
此屬性可以被設(shè)置在系列的根部,表示對(duì)此系列中所有數(shù)據(jù)都生效;也可以被設(shè)置在 data 中的每個(gè)數(shù)據(jù)項(xiàng)中,表示只對(duì)此數(shù)據(jù)項(xiàng)生效。
例如:
series: [{
symbolRepeat: ... // 對(duì) data 中所有數(shù)據(jù)項(xiàng)生效。
data: [23, 56]
}]
或者:
series: [{
data: [{
value: 23
symbolRepeat: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}, {
value: 56
symbolRepeat: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}]
}]
symbolRepeatDirection
指定圖形元素重復(fù)時(shí),繪制的順序。這個(gè)屬性在兩種情況下有用處:
- 當(dāng) symbolMargin 設(shè)置為負(fù)值時(shí),重復(fù)的圖形會(huì)互相覆蓋,這是可以使用 symbolRepeatDirection 來指定覆蓋順序。
- 當(dāng) animationDelay 或 animationDelayUpdate 被使用時(shí),symbolRepeatDirection 指定了 index 順序。
這個(gè)屬性的值可以是:'start' 或 'end'。
例子:
點(diǎn)擊編輯實(shí)例 》》
此屬性可以被設(shè)置在系列的 根部,表示對(duì)此系列中所有數(shù)據(jù)都生效;也可以被設(shè)置在 data 中的 每個(gè)數(shù)據(jù)項(xiàng)中,表示只對(duì)此數(shù)據(jù)項(xiàng)生效。
例如:
series: [{
symbolRepeatDirection: ... // 對(duì) data 中所有數(shù)據(jù)項(xiàng)生效。
data: [23, 56]
}]
或者:
series: [{
data: [{
value: 23
symbolRepeatDirection: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}, {
value: 56
symbolRepeatDirection: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}]
}]
symbolMargin
圖形的兩邊間隔(『兩邊』是指其數(shù)值軸方向的兩邊)。可以是絕對(duì)數(shù)值(如 20),或者百分比值(如 '-30%'),表示相對(duì)于自身尺寸 symbolSize 的百分比。只有當(dāng) symbolRepeat 被使用時(shí)有意義。
可以是正值,表示間隔大;也可以是負(fù)數(shù)。當(dāng) symbolRepeat 被使用時(shí),負(fù)數(shù)時(shí)能使圖形重疊。
可以在其值結(jié)尾處加一個(gè) "!",如 "30%!" 或 25!,表示第一個(gè)圖形的開始和最后一個(gè)圖形結(jié)尾留白,不緊貼邊界。默認(rèn)會(huì)緊貼邊界。
注意:
- 當(dāng) symbolRepeat 為 true/'fixed' 的時(shí)候: 這里設(shè)置的 symbolMargin 只是個(gè)參考值,真正最后的圖形間隔,是根據(jù) symbolRepeat、symbolMargin、symbolBoundingData 綜合計(jì)算得到。
- 當(dāng) symbolRepeat 為一個(gè)固定數(shù)值的時(shí)候: 這里設(shè)置的 symbolMargin 無效。
例子:
點(diǎn)擊編輯實(shí)例 》》
此屬性可以被設(shè)置在系列的根部,表示對(duì)此系列中所有數(shù)據(jù)都生效;也可以被設(shè)置在 data 中的 每個(gè)數(shù)據(jù)項(xiàng)中,表示只對(duì)此數(shù)據(jù)項(xiàng)生效。
例如:
series: [{
symbolMargin: ... // 對(duì) data 中所有數(shù)據(jù)項(xiàng)生效。
data: [23, 56]
}]
或者:
series: [{
data: [{
value: 23
symbolMargin: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}, {
value: 56
symbolMargin: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}]
}]
symbolClip
是否剪裁圖形。
- false(默認(rèn)值)/null/undefined:圖形本身表示數(shù)值大小。
- true:圖形被剪裁后剩余的部分表示數(shù)值大小。
symbolClip 常在這種場景下使用:同時(shí)表達(dá)『總值』和『當(dāng)前數(shù)值』。在這種場景下,可以使用兩個(gè)系列,一個(gè)系列是完整的圖形,當(dāng)做『背景』來表達(dá)總數(shù)值,另一個(gè)系列是使用 symbolClip 進(jìn)行剪裁過的圖形,表達(dá)當(dāng)前數(shù)值。
例子:
點(diǎn)擊編輯實(shí)例 》》
在這個(gè)例子中:
- 『背景系列』和『當(dāng)前值系列』使用相同的 symbolBoundingData,使得繪制出的圖形的大小是一樣的。
- 『當(dāng)前值系列』設(shè)置了比『背景系列』更高的 z,使得其覆蓋在『背景系列』上。
此屬性可以被設(shè)置在系列的根部,表示對(duì)此系列中所有數(shù)據(jù)都生效;也可以被設(shè)置在 data 中的每個(gè)數(shù)據(jù)項(xiàng)中,表示只對(duì)此數(shù)據(jù)項(xiàng)生效。
例如:
series: [{
symbolClip: ... // 對(duì) data 中所有數(shù)據(jù)項(xiàng)生效。
data: [23, 56]
}]
或者:
series: [{
data: [{
value: 23
symbolClip: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}, {
value: 56
symbolClip: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}]
}]
symbolBoundingData
這個(gè)屬性是『指定圖形界限的值』。它指定了一個(gè) data,這個(gè) data 映射在坐標(biāo)系上的位置,是圖形繪制的界限。也就是說,如果設(shè)置了 symbolBoundingData,圖形的尺寸則由 symbolBoundingData 決定。
當(dāng)柱子是水平的,symbolBoundingData 對(duì)應(yīng)到 x 軸上,當(dāng)柱子是豎直的,symbolBoundingData 對(duì)應(yīng)到 y 軸上。
規(guī)則:
- 沒有使用 symbolRepeat 時(shí):symbolBoundingData 缺省情況下和『參考柱』的尺寸一樣。圖形的尺寸由零點(diǎn)和 symbolBoundingData 決定。舉例,當(dāng)柱子是豎直的,柱子對(duì)應(yīng)的 data 為 24,symbolSize 設(shè)置為 [30, '50%'],symbolBoundingData 設(shè)置為 124,那么最終圖形的高度為 124 * 50% = 62。如果 symbolBoundingData 不設(shè)置,那么最終圖形的高度為 24 * 50% = 12。
- 使用了 symbolRepeat 時(shí):symbolBoundingData 缺省情況取當(dāng)前坐標(biāo)系所顯示出的最值。symbolBoundingData 定義了一個(gè) bounding,重復(fù)的圖形在這個(gè) bounding 中,依據(jù) symbolMargin 和 symbolRepeat 和 symbolSize 進(jìn)行排布。這幾個(gè)變量決定了圖形的間隔大小。
在這些場景中,你可能會(huì)需要設(shè)置 symbolBoundingData:
- 使用了 symbolCilp 時(shí):使用一個(gè)系列表達(dá)『總值』,另一個(gè)系列表達(dá)『當(dāng)前值』的時(shí)候,需要兩個(gè)系列畫出的圖形一樣大。那么就把兩個(gè)系列的 symbolBoundingData 設(shè)為一樣大,例子。
- 使用了 symbolRepeat 時(shí):如果需要不同柱子中的圖形的間隔保持一致,那么可以把 symbolBoundingData 設(shè)為一致的數(shù)值。當(dāng)然,不設(shè)置 symbolBoundingData 也是可以的,因?yàn)槠淙笔≈稻褪且粋€(gè)定值(坐標(biāo)系所顯示出的最值),例子。
symbolBoundingData 可以是一個(gè)數(shù)組,例如 [-40, 60],表示同時(shí)指定了正值的 symbolBoundingData 和負(fù)值的 symbolBoundingData。
此屬性可以被設(shè)置在系列的根部,表示對(duì)此系列中所有數(shù)據(jù)都生效;也可以被設(shè)置在 data 中的每個(gè)數(shù)據(jù)項(xiàng)中,表示只對(duì)此數(shù)據(jù)項(xiàng)生效。
參見如下示例:
點(diǎn)擊編輯實(shí)例 》》
例如:
series: [{
symbolBoundingData: ... // 對(duì) data 中所有數(shù)據(jù)項(xiàng)生效。
data: [23, 56]
}]
或者:
series: [{
data: [{
value: 23
symbolBoundingData: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}, {
value: 56
symbolBoundingData: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}]
}]
symbolPatternSize
可以使用圖片作為圖形的 pattern。取值類型為 number,默認(rèn)為:400。
var textureImg = new Image();
textureImg.src = 'data:image/jpeg;base64,...'; // dataURI
// 或者
// textureImg.src = 'http://xxx.xxx.xxx/xx.png'; // URL
...
itemStyle: {
normal: {
color: {
image: textureImg,
repeat: 'repeat'
}
}
}
這時(shí)候,symbolPatternSize 指定了 pattern 的縮放尺寸。比如 symbolPatternSize 為 400 時(shí)表示圖片顯示為 400px * 400px 的尺寸。
例子:
點(diǎn)擊編輯實(shí)例 》》
此屬性可以被設(shè)置在系列的 根部,表示對(duì)此系列中所有數(shù)據(jù)都生效;也可以被設(shè)置在 data 中的 每個(gè)數(shù)據(jù)項(xiàng)中,表示只對(duì)此數(shù)據(jù)項(xiàng)生效。
例如:
series: [{
symbolPatternSize: ... // 對(duì) data 中所有數(shù)據(jù)項(xiàng)生效。
data: [23, 56]
}]
或者:
series: [{
data: [{
value: 23
symbolPatternSize: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}, {
value: 56
symbolPatternSize: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
}]
}]
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: [ ... ]
}
data[i]
系列中的數(shù)據(jù)內(nèi)容數(shù)組。數(shù)組項(xiàng)通常為具體的數(shù)據(jù)項(xiàng)。
通常來說,數(shù)據(jù)用一個(gè)二維數(shù)組表示。如下,每一列被稱為一個(gè)『維度』。
series: [{
data: [
// 維度X 維度Y 其他維度 ...
[ 3.4, 4.5, 15, 43],
[ 4.2, 2.3, 20, 91],
[ 10.8, 9.5, 30, 18],
[ 7.2, 8.8, 18, 57]
]
}]
- 在 直角坐標(biāo)系 (grid) 中『維度X』和『維度Y』會(huì)默認(rèn)對(duì)應(yīng)于 xAxis 和 yAxis。
- 在 極坐標(biāo)系 (polar) 中『維度X』和『維度Y』會(huì)默認(rèn)對(duì)應(yīng)于 radiusAxis 和 angleAxis。
- 后面的其他維度是可選的,可以在別處被使用,例如:
- 在 visualMap 中可以將一個(gè)或多個(gè)維度映射到顏色,大小等多個(gè)圖形屬性上。
- 在 series.symbolSize 中可以使用回調(diào)函數(shù),基于某個(gè)維度得到 symbolSize 值。
- 使用 tooltip.formatter 或 series.label.normal.formatter 可以把其他維度的值展示出來。
特別地,當(dāng)只有一個(gè)軸為類目軸(axis.type 為 'category')的時(shí)候,數(shù)據(jù)可以簡化用一個(gè)一維數(shù)組表示。例如:
xAxis: {
data: ['a', 'b', 'm', 'n']
},
series: [{
// 與 xAxis.data 一一對(duì)應(yīng)。
data: [23, 44, 55, 19]
// 它其實(shí)是下面這種形式的簡化:
// data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]
『值』與 軸類型 的關(guān)系:
- 當(dāng)某維度對(duì)應(yīng)于數(shù)值軸(axis.type 為 'value' 或者 'log')的時(shí)候:
其值可以為 number(例如 12)。(也可以兼容 string 形式的 number,例如 '12') - 當(dāng)某維度對(duì)應(yīng)于類目軸(axis.type 為 'category')的時(shí)候:
其值須為類目的『序數(shù)』(從 0 開始)或者類目的『字符串值』。例如:xAxis: { type: 'category', data: ['星期一', '星期二', '星期三', '星期四'] }, yAxis: { type: 'category', data: ['a', 'b', 'm', 'n', 'p', 'q'] }, series: [{ data: [ // xAxis yAxis [ 0, 0, 2 ], // 意思是此點(diǎn)位于 xAxis: '星期一', yAxis: 'a'。 [ '星期四', 2, 1 ], // 意思是此點(diǎn)位于 xAxis: '星期四', yAxis: 'm'。 [ 2, 'p', 2 ], // 意思是此點(diǎn)位于 xAxis: '星期三', yAxis: 'p'。 [ 3, 3, 5 ] ] }]雙類目軸的示例可以參考 Github Punchcard 示例。
- 當(dāng)某維度對(duì)應(yīng)于時(shí)間軸(type 為 'time')的時(shí)候,值可以為:
- 一個(gè)時(shí)間戳,如 1484141700832,表示 UTC 時(shí)間。
- 或者字符串形式的時(shí)間描述:
- ISO 8601 的子集,只包含這些形式(這幾種格式,除非指明時(shí)區(qū),否則均表示本地時(shí)間,與 moment 一致):
- 部分年月日時(shí)間: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06'.
- 使用 'T' 或空格分割: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'.
- 時(shí)區(qū)設(shè)定: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
- 其他的時(shí)間字符串,包括(均表示本地時(shí)間): '2012', '2012-3-1', '2012/3/1', '2012/03/01', '2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'
- ISO 8601 的子集,只包含這些形式(這幾種格式,除非指明時(shí)區(qū),否則均表示本地時(shí)間,與 moment 一致):
- 或者用戶自行初始化的 Date 實(shí)例:
- 注意,用戶自行初始化 Date 實(shí)例的時(shí)候,瀏覽器的行為有差異,不同字符串的表示也不同。
- 例如:在 chrome 中,new Date('2012-01-01') 表示 UTC 時(shí)間的 2012 年 1 月 1 日,而 new Date('2012-1-1') 和 new Date('2012/01/01') 表示本地時(shí)間的 2012 年 1 月 1 日。在 safari 中,不支持 new Date('2012-1-1')這種表示方法。
- 所以,使用 new Date(dataString) 時(shí),可使用第三方庫解析(如 moment),或者使用 echarts.number.parseDate,或者參見 這里。
當(dāng)需要對(duì)個(gè)別數(shù)據(jù)進(jìn)行個(gè)性化定義時(shí):
數(shù)組項(xiàng)可用對(duì)象,其中的 value 像表示具體的數(shù)值,如:
[ 12, 34, { value : 56, //自定義標(biāo)簽樣式,僅對(duì)該數(shù)據(jù)項(xiàng)有效 label: {}, //自定義特殊 itemStyle,僅對(duì)該數(shù)據(jù)項(xiàng)有效 itemStyle:{} }, 10 ] // 或 [ [12, 33], [34, 313], { value: [56, 44], label: {}, itemStyle:{} }, [10, 33] ]空值:
當(dāng)某數(shù)據(jù)不存在時(shí)(ps:不存在不代表值為 0),可以用 '-' 或者 null 或者 undefined 或者 NaN 表示。
例如,無數(shù)據(jù)在折線圖中可表現(xiàn)為該點(diǎn)是斷開的,在其它圖中可表示為圖形不存在。
markPoint
圖表標(biāo)注。
markLine
圖表標(biāo)線。
markArea
圖表標(biāo)域,常用于標(biāo)記圖表中某個(gè)范圍的數(shù)據(jù),例如標(biāo)出某段時(shí)間投放了廣告。
zlevel
象形柱圖所有圖形的 zlevel 值。默認(rèn)為 0。
zlevel用于 Canvas 分層,不同zlevel值的圖形會(huì)放置在不同的 Canvas 中,Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁(例如有動(dòng)畫)的組件設(shè)置成一個(gè)單獨(dú)的zlevel。需要注意的是過多的 Canvas 會(huì)引起內(nèi)存開銷的增大,在手機(jī)端上需要謹(jǐn)慎使用以防崩潰。
zlevel 大的 Canvas 會(huì)放在 zlevel 小的 Canvas 的上面。
z
象形柱圖組件的所有圖形的z值,默認(rèn)為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)事件。
animation
是否開啟動(dòng)畫。默認(rèn)為 true
animationThreshold
是否開啟動(dòng)畫的閾值,默認(rèn)為 2000,當(dāng)單個(gè)系列顯示的圖形數(shù)量大于這個(gè)閾值時(shí)會(huì)關(guān)閉動(dòng)畫。
animationDuration
初始動(dòng)畫的時(shí)長,默認(rèn)為1000,支持回調(diào)函數(shù),可以通過每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫效果:
animationDuration: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}
animationEasing
初始動(dòng)畫的緩動(dòng)效果,默認(rèn)為 cubicOut。不同的緩動(dòng)效果可以參考 緩動(dòng)示例。
animationDurationUpdate
數(shù)據(jù)更新動(dòng)畫的時(shí)長,默認(rèn)為 300。
支持回調(diào)函數(shù),可以通過每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫效果:
animationDurationUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}
animationEasingUpdate
數(shù)據(jù)更新動(dòng)畫的緩動(dòng)效果,默認(rèn)為 cubicOut。
tooltip
本系列特定的 tooltip 設(shè)定。
網(wǎng)站名稱:創(chuàng)新互聯(lián)ECharts教程:ECharts象形柱圖屬性設(shè)置
網(wǎng)站鏈接:http://www.fisionsoft.com.cn/article/cojgjdp.html


咨詢
建站咨詢
