ECharts series組件配置熱力圖

設(shè)置特定于ECharts熱力圖系列的提示框浮層

ECharts地圖系列

ECharts地圖的提示框浮層設(shè)置

ECharts系列列表：平行坐標(biāo)系

ECharts平行坐標(biāo)系屬性

ECharts線(xiàn)圖：繪制線(xiàn)數(shù)據(jù)

ECharts系列：?；鶊D的使用

ECharts漏斗圖屬性與實(shí)例介紹

ECharts儀表盤(pán)屬性與使用

ECharts象形柱圖

ECharts系列：主題河流圖

設(shè)置ECharts主題河流圖的提示框浮層

ECharts圖表自定義系列

ECharts配置項(xiàng)：背景色

設(shè)置ECharts全局字體樣式

設(shè)置ECharts動(dòng)畫(huà)的屬性

ECharts漸進(jìn)式渲染簡(jiǎn)單介紹

更多有關(guān)ECharts圖表的設(shè)置

閱讀(21.1k) 書(shū)簽贊(0) 我要糾錯(cuò)

ECharts象形柱圖屬性設(shè)置

2018-12-28 09:22 更新

ECharts 象形柱圖屬性

type

在象形柱圖中 type 屬性值為 'pictorialBar'。

name

系列名稱(chēng)，用于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)系（也稱(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í)候有用。

cursor

鼠標(biāo)懸浮時(shí)在圖形元素上時(shí)鼠標(biāo)的樣式是什么，默認(rèn)為 'pointer'。同 CSS 的 cursor。

label

圖形上的文本標(biāo)簽，可用于說(shuō)明圖形的一些數(shù)據(jù)信息，比如值，名稱(chēng)等，label選項(xiàng)在 ECharts 2.x 中放置于itemStyle.normal下，在 ECharts 3 中為了讓整個(gè)配置項(xiàng)結(jié)構(gòu)更扁平合理，label 被拿出來(lái)跟 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ì)于類(lèi)目寬度的百分比。

在同一坐標(biāo)系上，此屬性會(huì)被多個(gè) 'pictorialBar' 系列共享。此屬性應(yīng)設(shè)置于此坐標(biāo)系中最后一個(gè) 'pictorialBar' 系列上才會(huì)生效，并且是對(duì)此坐標(biāo)系中所有 'pictorialBar' 系列生效。

barMaxWidth

柱條的最大寬度，不設(shè)時(shí)自適應(yīng)。支持設(shè)置成相對(duì)于類(lèi)目寬度的百分比。

barMinHeight

柱條最小高度，可用于防止某數(shù)據(jù)項(xiàng)的值過(guò)小而影響交互。

barGap

柱間距離，可設(shè)固定值（如 20）或者百分比（如 '30%'，表示柱子寬度的 30%）。默認(rèn)為-100%

如果想要兩個(gè)系列的柱子重疊，可以設(shè)置 barGap 為 '-100%'。這在用柱子做背景的時(shí)候有用。

例子：

ECharts象形柱圖

點(diǎn)擊編輯實(shí)例》》

barCategoryGap

類(lèi)目間柱形距離，默認(rèn)為類(lèi)目間距的20%，可設(shè)固定值

symbol

圖形類(lèi)型。

ECharts 提供的標(biāo)記類(lèi)型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通過(guò) 'image://url' 設(shè)置為圖片，其中 url 為圖片的鏈接，或者 dataURI。

可以通過(guò) 'path://' 將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。路徑的格式參見(jiàn) SVG PathData。可以從 Adobe Illustrator 等工具編輯導(dǎo)出。

例子：

ECharts象形柱圖

點(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ù)組分開(kāi)表示寬和高，例如 [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ì)算出來(lái)的。

例如，當(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 軸（即柱子是橫向的）的情況類(lèi)似對(duì)調(diào)可得出。

例子：

ECharts象形柱圖

點(diǎn)擊編輯實(shí)例》》

例如：

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)）：圖形邊緣與柱子開(kāi)始的地方內(nèi)切。
'end'：圖形邊緣與柱子結(jié)束的地方內(nèi)切。
'center'：圖形在柱子里居中。

例子：

ECharts象形柱圖

點(diǎn)擊編輯實(shí)例》》

例如：

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ì)算出來(lái)的位置進(jìn)行微調(diào)。

可以設(shè)置成絕對(duì)值（如 10），也可以設(shè)置成百分比（如 '120%'、['55%', 23]）。

當(dāng)設(shè)置為百分比時(shí)，表示相對(duì)于自身尺寸 symbolSize 的百分比。

例如 [0, '-50%'] 就是把圖形向上移動(dò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)。

例如：

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 無(wú)關(guān)。這在此圖形被用于做背景時(shí)有用。

例子：

ECharts象形柱圖

點(diǎn)擊編輯實(shí)例》》

例如：

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 來(lái)指定覆蓋順序。
當(dāng) animationDelay 或 animationDelayUpdate 被使用時(shí)，symbolRepeatDirection 指定了 index 順序。

這個(gè)屬性的值可以是：'start' 或 'end'。

例子：

ECharts象形柱圖

點(diǎn)擊編輯實(shí)例》》

例如：

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è)圖形的開(kāi)始和最后一個(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 無(wú)效。

例子：

ECharts象形柱圖

點(diǎn)擊編輯實(shí)例》》

例如：

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 常在這種場(chǎng)景下使用：同時(shí)表達(dá)『總值』和『當(dāng)前數(shù)值』。在這種場(chǎng)景下，可以使用兩個(gè)系列，一個(gè)系列是完整的圖形，當(dāng)做『背景』來(lái)表達(dá)總數(shù)值，另一個(gè)系列是使用 symbolClip 進(jìn)行剪裁過(guò)的圖形，表達(dá)當(dāng)前數(shù)值。

例子：

ECharts象形柱圖

點(diǎn)擊編輯實(shí)例》》

在這個(gè)例子中：

『背景系列』和『當(dāng)前值系列』使用相同的 symbolBoundingData，使得繪制出的圖形的大小是一樣的。
『當(dāng)前值系列』設(shè)置了比『背景系列』更高的 z，使得其覆蓋在『背景系列』上。

例如：

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)系上的位置，是圖形繪制的界限。也就是說(shuō)，如果設(shè)置了 symbolBoundingData，圖形的尺寸則由 symbolBoundingData 決定。

當(dāng)柱子是水平的，symbolBoundingData 對(duì)應(yīng)到 x 軸上，當(dāng)柱子是豎直的，symbolBoundingData 對(duì)應(yīng)到 y 軸上。

規(guī)則：

沒(méi)有使用 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è)變量決定了圖形的間隔大小。

在這些場(chǎng)景中，你可能會(huì)需要設(shè)置 symbolBoundingData：

使用了 symbolCilp 時(shí)：使用一個(gè)系列表達(dá)『總值』，另一個(gè)系列表達(dá)『當(dāng)前值』的時(shí)候，需要兩個(gè)系列畫(huà)出的圖形一樣大。那么就把兩個(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。

參見(jiàn)如下示例：

ECharts象形柱圖

點(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。取值類(lèi)型為 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 的尺寸。

例子：

ECharts象形柱圖

點(diǎn)擊編輯實(shí)例》》

例如：

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: [
        // 每一列稱(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ù)內(nèi)容數(shù)組。數(shù)組項(xiàng)通常為具體的數(shù)據(jù)項(xiàng)。

通常來(lái)說(shuō)，數(shù)據(jù)用一個(gè)二維數(shù)組表示。如下，每一列被稱(chēng)為一個(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 可以把其他維度的值展示出來(lái)。

特別地，當(dāng)只有一個(gè)軸為類(lèi)目軸（axis.type 為 'category'）的時(shí)候，數(shù)據(jù)可以簡(jiǎn)化用一個(gè)一維數(shù)組表示。例如：

xAxis: {
    data: ['a', 'b', 'm', 'n']
},
series: [{
    // 與 xAxis.data 一一對(duì)應(yīng)。
    data: [23,  44,  55,  19]
    // 它其實(shí)是下面這種形式的簡(jiǎn)化：
    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]

『值』與軸類(lèi)型的關(guān)系：

當(dāng)某維度對(duì)應(yīng)于數(shù)值軸（axis.type 為 'value' 或者 'log'）的時(shí)候：
其值可以為 number（例如 12）。（也可以兼容 string 形式的 number，例如 '12'）

當(dāng)某維度對(duì)應(yīng)于類(lèi)目軸（axis.type 為 'category'）的時(shí)候：
其值須為類(lèi)目的『序數(shù)』（從 0 開(kāi)始）或者類(lèi)目的『字符串值』。例如：

 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  ]
      ] 
}]

雙類(lèi)目軸的示例可以參考 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'
- 或者用戶(hù)自行初始化的 Date 實(shí)例：
  - 注意，用戶(hù)自行初始化 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í)，可使用第三方庫(kù)解析（如 moment），或者使用 echarts.number.parseDate，或者參見(jiàn) 這里。
當(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 表示。

例如，無(wú)數(shù)據(jù)在折線(xiàn)圖中可表現(xiàn)為該點(diǎn)是斷開(kāi)的，在其它圖中可表示為圖形不存在。

markPoint

圖表標(biāo)注。

markLine

圖表標(biāo)線(xiàn)。

markArea

圖表標(biāo)域，常用于標(biāo)記圖表中某個(gè)范圍的數(shù)據(jù)，例如標(biāo)出某段時(shí)間投放了廣告。

zlevel

象形柱圖所有圖形的 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值，默認(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

是否開(kāi)啟動(dòng)畫(huà)。默認(rèn)為 true

animationThreshold

是否開(kāi)啟動(dòng)畫(huà)的閾值，默認(rèn)為 2000，當(dāng)單個(gè)系列顯示的圖形數(shù)量大于這個(gè)閾值時(shí)會(huì)關(guān)閉動(dòng)畫(huà)。

animationDuration

初始動(dòng)畫(huà)的時(shí)長(zhǎng)，默認(rèn)為1000，支持回調(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)為 cubicOut。不同的緩動(dòng)效果可以參考緩動(dòng)示例。

animationDurationUpdate

數(shù)據(jù)更新動(dòng)畫(huà)的時(shí)長(zhǎng)，默認(rèn)為 300。

支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫(huà)效果：

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

animationEasingUpdate

數(shù)據(jù)更新動(dòng)畫(huà)的緩動(dòng)效果，默認(rèn)為 cubicOut。

tooltip

本系列特定的 tooltip 設(shè)定。

以上內(nèi)容是否對(duì)您有幫助：

← ECharts象形柱圖

象形柱圖hover動(dòng)畫(huà)效果設(shè)置 →

寫(xiě)筆記

我要補(bǔ)充

ECharts象形柱圖屬性設(shè)置

ECharts 象形柱圖屬性

推薦文章

推薦教程

推薦課程