新聞中心
K 線圖屬性
type
type 屬性的默認(rèn)值為 candlestick

在網(wǎng)站制作、成都網(wǎng)站建設(shè)過(guò)程中,需要針對(duì)客戶(hù)的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場(chǎng)情況進(jìn)行定位分析,以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。成都創(chuàng)新互聯(lián)還需要根據(jù)客戶(hù)的需求進(jìn)行功能模塊的開(kāi)發(fā)和設(shè)計(jì),包括內(nèi)容管理、前臺(tái)展示、用戶(hù)權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。
coordinateSystem
該系列使用的坐標(biāo)系,可選值:
- 'cartesian2d':使用二維的直角坐標(biāo)系(也稱(chēng)笛卡爾坐標(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
設(shè)置 K 線圖的名稱(chēng),用于tooltip的顯示,legend 的圖例篩選,在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列。
legendHoverLink
判斷 K線圖 是否啟用 圖例 hover 時(shí)的聯(lián)動(dòng)高亮,默認(rèn)值為 true,即啟動(dòng)聯(lián)動(dòng)高亮。
hoverAnimation
是否開(kāi)啟 hover 在 box 上的動(dòng)畫(huà)效果,默認(rèn)為 true。
layout
設(shè)置 K 線圖的布局方式,在沒(méi)有設(shè)置值的時(shí)候,它的默認(rèn)值為 null,可選值如下:
- 'horizontal':水平排布各個(gè) box。
- 'vertical':豎直排布各個(gè) box。
默認(rèn)值根據(jù)當(dāng)前坐標(biāo)系狀況決定:如果 category 軸為橫軸,則水平排布;否則豎直排布;如果沒(méi)有 category 軸則水平排布。
barWidth
指定柱的寬度??梢允褂媒^對(duì)數(shù)值(如 10)或百分比(如 '20%',表示 band width 的百分之多少)。默認(rèn)自適應(yīng)。
barMinWidth
指定柱的最大寬度??梢允褂媒^對(duì)數(shù)值(如 10)或百分比(如 '20%',表示 band width 的百分之多少)。默認(rèn)自適應(yīng)。
barMaxWidth
指定柱的最小寬度??梢允褂媒^對(duì)數(shù)值(如 10)或百分比(如 '20%',表示 band width 的百分之多少)。默認(rèn)自適應(yīng)。
itemStyle
candlestick 圖形樣式,有 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è)維度的名稱(chēng)。這個(gè)名稱(chēng)會(huì)被顯示到默認(rèn)的 tooltip 中。
dimensions: ['date', 'open', 'close', 'highest', 'lowest']
data: [
// 有了上面 dimensions 定義后,下面這五個(gè)維度的名稱(chēng)分別為:
// 'date', 'open', 'close', 'highest', 'lowest'
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
...
]
}
series: {
type: 'xxx',
dimensions: [
null, // 如果此維度不想給出定義,則使用 null 即可
{type: 'ordinal'}, // 只定義此維度的類(lèi)型。
// 'ordinal' 表示離散型,一般文本使用這種類(lèi)型。
// 如果類(lèi)型沒(méi)有被定義,會(huì)自動(dòng)猜測(cè)類(lèi)型。
{name: 'good', type: 'number'},
'bad' // 等同于 {name: 'bad'}
]
}
dimensions 數(shù)組中的每一項(xiàng)可以是:
- string,如 'someName',等同于 {name: 'someName'}
- Object,屬性可以有:
- name: string。
- type: string,支持
- number
- float,即 Float64Array
- int,即 Int32Array
- ordinal,表示離散數(shù)據(jù),一般指字符串。
- time,表示時(shí)間類(lèi)型,時(shí)間類(lèi)型的支持參見(jiàn) data
值得一提的是,當(dāng)定義了 dimensions 后,默認(rèn) tooltip 中對(duì)個(gè)維度的顯示,會(huì)變?yōu)椤贺Q排』,從而方便顯示每個(gè)維度的名稱(chēng)。如果沒(méi)有定義 dimensions,則默認(rèn) tooltip 會(huì)橫排顯示,且只顯示數(shù)值沒(méi)有維度名稱(chē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: [
// 每一列稱(chēng)為一個(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)名稱(chēng))。
當(dāng)使用 dimensions 給維度定義名稱(chēng)后,encode 中可直接引用名稱(chēng),例如:
series: {
type: 'xxx',
dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
encode: {
x: 'date',
y: ['open', 'close', 'highest', 'lowest']
},
data: [ ... ]
}
data[i]
數(shù)據(jù)格式是如下的二維數(shù)組。
[
[2320.26, 2320.26, 2287.3, 2362.94],
[2300, 2291.3, 2288.26, 2308.38],
{ // 數(shù)據(jù)項(xiàng)也可以是 Object,從而里面能含有對(duì)此數(shù)據(jù)項(xiàng)的特殊設(shè)置。
value: [2300, 2291.3, 2288.26, 2308.38],
itemStyle: {...}
},
...
]
二維數(shù)組的每一數(shù)組項(xiàng)(上例中的每行)是渲染一個(gè) box,它含有四個(gè)量值,依次是:
[open, close, lowest, highest] (即:[開(kāi)盤(pán)值, 收盤(pán)值, 最低值, 最高值])
markPoint
設(shè)置 K 線圖的標(biāo)注。
markLine
設(shè)置 K 線圖的標(biāo)線。
markArea
設(shè)置 K 線圖的標(biāo)域,常用于標(biāo)記圖表中某個(gè)范圍的數(shù)據(jù),例如標(biāo)出某段時(shí)間投放了廣告。
zlevel
K 線圖所有圖形的 zlevel 值。默認(rèn)值為 0。
zlevel 用于 Canvas 分層,不同 zlevel 值的圖形會(huì)放置在不同的 Canvas 中,Canvas 分層是一種常見(jiàn)的優(yōu)化手段。我們可以把一些圖形變化頻繁(例如有動(dòng)畫(huà))的組件設(shè)置成一個(gè)單獨(dú)的 zlevel。需要注意的是過(guò)多的 Canvas 會(huì)引起內(nèi)存開(kāi)銷(xiāo)的增大,在手機(jī)端上需要謹(jǐn)慎使用以防崩潰。
zlevel 大的 Canvas 會(huì)放在 zlevel 小的 Canvas 的上面。
z
K 線圖組件的所有圖形的 z 值。默認(rèn)值為 2。
z 值用于控制圖形的前后順序。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)值為 300,支持回調(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)為 linear。不同的緩動(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;
}
也可以看該示例
新聞標(biāo)題:創(chuàng)新互聯(lián)ECharts教程:K線圖有哪些屬性?
鏈接URL:http://www.5511xx.com/article/cohjghj.html


咨詢(xún)
建站咨詢(xún)
