建站
咨詢
售后
建站咨詢
新聞中心
K 線圖屬性
typetype 屬性的默認值為 candlestick
在網(wǎng)站制作、成都網(wǎng)站建設過程中，需要針對客戶的行業(yè)特點、產(chǎn)品特性、目標受眾和市場情況進行定位分析，以確定網(wǎng)站的風格、色彩、版式、交互等方面的設計方向。成都創(chuàng)新互聯(lián)還需要根據(jù)客戶的需求進行功能模塊的開發(fā)和設計，包括內(nèi)容管理、前臺展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計和安全保護等功能。
coordinateSystem該系列使用的坐標系，可選值：
- 'cartesian2d'：使用二維的直角坐標系（也稱笛卡爾坐標系），通過下面介紹的 xAxisIndex 和 yAxisIndex 屬性指定相應的坐標軸組件。
xAxisIndex使用的 x 軸的 index，在單個圖表實例中存在多個 x 軸的時候有用。
yAxisIndex使用的 y 軸的 index，在單個圖表實例中存在多個 y 軸的時候有用。
name設置 K 線圖的名稱，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項時用于指定對應的系列。
legendHoverLink 判斷 K線圖 是否啟用 圖例 hover 時的聯(lián)動高亮，默認值為 true，即啟動聯(lián)動高亮。
hoverAnimation 是否開啟 hover 在 box 上的動畫效果，默認為 true。
layout設置 K 線圖的布局方式，在沒有設置值的時候，它的默認值為 null，可選值如下：
- 'horizontal'：水平排布各個 box。
- 'vertical'：豎直排布各個 box。
默認值根據(jù)當前坐標系狀況決定：如果 category 軸為橫軸，則水平排布；否則豎直排布；如果沒有 category 軸則水平排布。
barWidth指定柱的寬度。可以使用絕對數(shù)值（如 10）或百分比（如 '20%'，表示 band width 的百分之多少）。默認自適應。
barMinWidth指定柱的最大寬度。可以使用絕對數(shù)值（如 10）或百分比（如 '20%'，表示 band width 的百分之多少）。默認自適應。
barMaxWidth指定柱的最小寬度?？梢允褂媒^對數(shù)值（如 10）或百分比（如 '20%'，表示 band width 的百分之多少）。默認自適應。
itemStylecandlestick 圖形樣式，有 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，支持
- number
- float，即 Float64Array
- int，即 Int32Array
- ordinal，表示離散數(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: [ ... ]
}data[i]數(shù)據(jù)格式是如下的二維數(shù)組。
[
[2320.26, 2320.26, 2287.3, 2362.94],
[2300, 2291.3, 2288.26, 2308.38],
{ // 數(shù)據(jù)項也可以是 Object，從而里面能含有對此數(shù)據(jù)項的特殊設置。
value: [2300, 2291.3, 2288.26, 2308.38],
itemStyle: {...}
},
...
]二維數(shù)組的每一數(shù)組項（上例中的每行）是渲染一個 box，它含有四個量值，依次是：
[open, close, lowest, highest] （即：[開盤值, 收盤值, 最低值, 最高值]）markPoint設置 K 線圖的標注。
markLine設置 K 線圖的標線。
markArea設置 K 線圖的標域，常用于標記圖表中某個范圍的數(shù)據(jù)，例如標出某段時間投放了廣告。
zlevelK 線圖所有圖形的 zlevel 值。默認值為 0。
zlevel 用于 Canvas 分層，不同 zlevel 值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設置成一個單獨的 zlevel。需要注意的是過多的 Canvas 會引起內(nèi)存開銷的增大，在手機端上需要謹慎使用以防崩潰。
zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。
zK 線圖組件的所有圖形的 z 值。默認值為 2。
z 值用于控制圖形的前后順序。z 值小的圖形會被 z 值大的圖形覆蓋。
z 相比 zlevel 優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。
silent圖形是否不響應和觸發(fā)鼠標事件，默認為 false，即響應和觸發(fā)鼠標事件。
animationDuration初始動畫的時長，默認值為 300，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果：
animationDuration: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}animationEasing初始動畫的緩動效果，默認為 linear。不同的緩動效果可以參考 緩動示例。
animationDelay初始動畫的延遲，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果。
如下示例：
animationDelay: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}也可以看該示例
本文名稱：創(chuàng)新互聯(lián)ECharts教程：K線圖有哪些屬性？
鏈接地址：http://www.dlmjj.cn/article/cohjghj.html
