ECharts象形柱圖屬性設置

本文轉載自查看原文 2021-03-30 15:43 527

ECharts 象形柱圖屬性

type

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

name

系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新數據和配置項時用於指定對應的系列。

legendHoverLink

是否啟用圖例 hover 時的聯動高亮，默認為 true。

coordinateSystem

該系列使用的坐標系，可選的值：

'cartesian2d'使用二維的直角坐標系（也稱笛卡爾坐標系），通過 xAxisIndex, yAxisIndex指定相應的坐標軸組件。

xAxisIndex

使用的 x 軸的 index，在單個圖表實例中存在多個 x 軸的時候有用。

yAxisIndex

使用的 y 軸的 index，在單個圖表實例中存在多個 y軸的時候有用。

cursor

鼠標懸浮時在圖形元素上時鼠標的樣式是什么，默認為 'pointer'。同 CSS 的 cursor。

label

圖形上的文本標簽，可用於說明圖形的一些數據信息，比如值，名稱等，label選項在 ECharts 2.x 中放置於itemStyle.normal下，在 ECharts 3 中為了讓整個配置項結構更扁平合理，label 被拿出來跟 itemStyle 平級，並且跟 itemStyle 一樣擁有 normal, emphasis 兩個狀態。

itemStyle

圖形樣式，有 normal 和 emphasis 兩個狀態。normal 是圖形在默認狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在鼠標懸浮或者圖例聯動高亮時。

barWidth

柱條的寬度，不設時自適應。支持設置成相對於類目寬度的百分比。

在同一坐標系上，此屬性會被多個 'pictorialBar' 系列共享。此屬性應設置於此坐標系中最后一個 'pictorialBar' 系列上才會生效，並且是對此坐標系中所有 'pictorialBar' 系列生效。

barMaxWidth

柱條的最大寬度，不設時自適應。支持設置成相對於類目寬度的百分比。

barMinHeight

柱條最小高度，可用於防止某數據項的值過小而影響交互。

barGap

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

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

例子：

ECharts象形柱圖

點擊編輯實例》》

barCategoryGap

類目間柱形距離，默認為類目間距的20%，可設固定值

symbol

圖形類型。

ECharts 提供的標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

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

可以通過 'path://' 將圖標設置為任意的矢量路徑。這種方式相比於使用圖片的方式，不用擔心因為縮放而產生鋸齒或模糊，而且可以設置為任意顏色。路徑圖形會自適應調整為合適的大小。路徑的格式參見 SVG PathData。可以從 Adobe Illustrator 等工具編輯導出。

例子：

ECharts象形柱圖

點擊編輯實例》》

此屬性可以被設置在系列的根部，表示對此系列中所有數據都生效；也可以被設置在 data 中的每個數據項中，表示只對此數據項生效。

例如：

series: [{
    symbol: ... // 對 data 中所有數據項生效。 data: [23, 56] }] 或者 series: [{ data: [{ value: 23 symbol: ... // 只對此數據項生效 }, { value: 56 symbol: ... // 只對此數據項生效 }] }]

symbolSize

圖形的大小。默認為 ['100%', '100%']。

可以用數組分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10，也可以設置成諸如 10 這樣單一的數字，表示 [10, 10]。

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

當設置為百分比時，圖形的大小是基於基准柱的尺寸計算出來的。

例如，當基准柱基於 x 軸（即柱子是縱向的），symbolSize 設置為 ['30%', '50%']，那么最終圖形的尺寸是：

寬度：基准柱的寬度 * 30%。
高度：如果 symbolRepeat 為 false：基准柱的高度 * 50%。如果 symbolRepeat 為 true：基准柱的寬度 * 50%。

基准柱基於 y 軸（即柱子是橫向的）的情況類似對調可得出。

例子：

ECharts象形柱圖

點擊編輯實例》》

此屬性可以被設置在系列的根部，表示對此系列中所有數據都生效；也可以被設置在 data 中的每個數據項中，表示只對此數據項生效。

例如：

series: [{
    symbolSize: ... // 對 data 中所有數據項生效。 data: [23, 56] }] 或者 series: [{ data: [{ value: 23 symbolSize: ... // 只對此數據項生效 }, { value: 56 symbolSize: ... // 只對此數據項生效 }] }]

symbolPosition

圖形的定位位置。可取值：

'start'（默認）：圖形邊緣與柱子開始的地方內切。
'end'：圖形邊緣與柱子結束的地方內切。
'center'：圖形在柱子里居中。

例子：

ECharts象形柱圖

點擊編輯實例》》

此屬性可以被設置在系列的根部，表示對此系列中所有數據都生效；也可以被設置在 data 中的每個數據項中，表示只對此數據項生效。

例如：

series: [{
    symbolPosition: ... // 對 data 中所有數據項生效。 data: [23, 56] }]

或者：

series: [{
    data: [{
        value: 23 symbolPosition: ... // 只對此數據項生效 }, { value: 56 symbolPosition: ... // 只對此數據項生效 }] }]

symbolOffset

圖形相對於原本位置的偏移。symbolOffset 是圖形定位中最后計算的一個步驟，可以對圖形計算出來的位置進行微調。

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

當設置為百分比時，表示相對於自身尺寸 symbolSize 的百分比。

例如 [0, '-50%'] 就是把圖形向上移動了自身尺寸的一半的位置。

此屬性可以被設置在系列的根部，表示對此系列中所有數據都生效；也可以被設置在 data 中的每個數據項中，表示只對此數據項生效。

例如：

series: [{
    symbolOffset: ... // 對 data 中所有數據項生效。 data: [23, 56] }]

或者：

series: [{
    data: [{
        value: 23 symbolOffset: ... // 只對此數據項生效 }, { value: 56 symbolOffset: ... // 只對此數據項生效 }] }]

symbolRotate

圖形的旋轉角度。

注意，symbolRotate 並不會影響圖形的定位（哪怕超出基准柱的邊界），而只是單純得繞自身中心旋轉。

此屬性可以被設置在系列的根部，表示對此系列中所有數據都生效；也可以被設置在 data 中的每個數據項中，表示只對此數據項生效。

例如：

series: [{
    symbolRotate: ... // 對 data 中所有數據項生效。 data: [23, 56] }]

或者：

series: [{
    data: [{
        value: 23 symbolRotate: ... // 只對此數據項生效 }, { value: 56 symbolRotate: ... // 只對此數據項生效 }] }]

symbolRepeat

指定圖形元素是否重復。值可為：

false/null/undefined：不重復，即每個數據值用一個圖形元素表示。
true：使圖形元素重復，即每個數據值用一組重復的圖形元素表示。重復的次數依據 data 計算得到。
a number：使圖形元素重復，即每個數據值用一組重復的圖形元素表示。重復的次數是給定的定值。
'fixed'：使圖形元素重復，即每個數據值用一組重復的圖形元素表示。重復的次數依據 symbolBoundingData 計算得到，即與 data 無關。這在此圖形被用於做背景時有用。

例子：

ECharts象形柱圖

點擊編輯實例》》

此屬性可以被設置在系列的根部，表示對此系列中所有數據都生效；也可以被設置在 data 中的每個數據項中，表示只對此數據項生效。

例如：

series: [{
    symbolRepeat: ... // 對 data 中所有數據項生效。 data: [23, 56] }]

或者：

series: [{
    data: [{
        value: 23 symbolRepeat: ... // 只對此數據項生效 }, { value: 56 symbolRepeat: ... // 只對此數據項生效 }] }]

symbolRepeatDirection

指定圖形元素重復時，繪制的順序。這個屬性在兩種情況下有用處：

當 symbolMargin 設置為負值時，重復的圖形會互相覆蓋，這是可以使用 symbolRepeatDirection 來指定覆蓋順序。
當 animationDelay 或 animationDelayUpdate 被使用時，symbolRepeatDirection 指定了 index 順序。

這個屬性的值可以是：'start' 或 'end'。

例子：

ECharts象形柱圖

點擊編輯實例》》

此屬性可以被設置在系列的根部，表示對此系列中所有數據都生效；也可以被設置在 data 中的每個數據項中，表示只對此數據項生效。

例如：

series: [{
    symbolRepeatDirection: ... // 對 data 中所有數據項生效。 data: [23, 56] }]

或者：

series: [{
    data: [{
        value: 23 symbolRepeatDirection: ... // 只對此數據項生效 }, { value: 56 symbolRepeatDirection: ... // 只對此數據項生效 }] }]

symbolMargin

圖形的兩邊間隔（『兩邊』是指其數值軸方向的兩邊）。可以是絕對數值（如 20），或者百分比值（如 '-30%'），表示相對於自身尺寸 symbolSize 的百分比。只有當 symbolRepeat 被使用時有意義。

可以是正值，表示間隔大；也可以是負數。當 symbolRepeat 被使用時，負數時能使圖形重疊。

可以在其值結尾處加一個 "!"，如 "30%!" 或 25!，表示第一個圖形的開始和最后一個圖形結尾留白，不緊貼邊界。默認會緊貼邊界。

注意：

當 symbolRepeat 為 true/'fixed' 的時候：這里設置的 symbolMargin 只是個參考值，真正最后的圖形間隔，是根據 symbolRepeat、symbolMargin、symbolBoundingData 綜合計算得到。
當 symbolRepeat 為一個固定數值的時候：這里設置的 symbolMargin 無效。

例子：

ECharts象形柱圖

點擊編輯實例》》

此屬性可以被設置在系列的根部，表示對此系列中所有數據都生效；也可以被設置在 data 中的每個數據項中，表示只對此數據項生效。

例如：

series: [{
    symbolMargin: ... // 對 data 中所有數據項生效。 data: [23, 56] }]

或者：

series: [{
    data: [{
        value: 23 symbolMargin: ... // 只對此數據項生效 }, { value: 56 symbolMargin: ... // 只對此數據項生效 }] }]

symbolClip

是否剪裁圖形。

false（默認值）/null/undefined：圖形本身表示數值大小。
true：圖形被剪裁后剩余的部分表示數值大小。

symbolClip 常在這種場景下使用：同時表達『總值』和『當前數值』。在這種場景下，可以使用兩個系列，一個系列是完整的圖形，當做『背景』來表達總數值，另一個系列是使用 symbolClip 進行剪裁過的圖形，表達當前數值。

例子：

ECharts象形柱圖

點擊編輯實例》》

在這個例子中：

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

此屬性可以被設置在系列的根部，表示對此系列中所有數據都生效；也可以被設置在 data 中的每個數據項中，表示只對此數據項生效。

例如：

series: [{
    symbolClip: ... // 對 data 中所有數據項生效。 data: [23, 56] }]

或者：

series: [{
    data: [{
        value: 23 symbolClip: ... // 只對此數據項生效 }, { value: 56 symbolClip: ... // 只對此數據項生效 }] }]

symbolBoundingData

這個屬性是『指定圖形界限的值』。它指定了一個 data，這個 data 映射在坐標系上的位置，是圖形繪制的界限。也就是說，如果設置了 symbolBoundingData，圖形的尺寸則由 symbolBoundingData 決定。

當柱子是水平的，symbolBoundingData 對應到 x 軸上，當柱子是豎直的，symbolBoundingData 對應到 y 軸上。

規則：

沒有使用 symbolRepeat 時：symbolBoundingData 缺省情況下和『參考柱』的尺寸一樣。圖形的尺寸由零點和 symbolBoundingData 決定。舉例，當柱子是豎直的，柱子對應的 data 為 24，symbolSize 設置為 [30, '50%']，symbolBoundingData 設置為 124，那么最終圖形的高度為 124 * 50% = 62。如果 symbolBoundingData 不設置，那么最終圖形的高度為 24 * 50% = 12。
使用了 symbolRepeat 時：symbolBoundingData 缺省情況取當前坐標系所顯示出的最值。symbolBoundingData 定義了一個 bounding，重復的圖形在這個 bounding 中，依據 symbolMargin 和 symbolRepeat 和 symbolSize 進行排布。這幾個變量決定了圖形的間隔大小。

在這些場景中，你可能會需要設置 symbolBoundingData：

使用了 symbolCilp 時：使用一個系列表達『總值』，另一個系列表達『當前值』的時候，需要兩個系列畫出的圖形一樣大。那么就把兩個系列的 symbolBoundingData 設為一樣大，例子。

使用了 symbolRepeat 時：如果需要不同柱子中的圖形的間隔保持一致，那么可以把 symbolBoundingData 設為一致的數值。當然，不設置 symbolBoundingData 也是可以的，因為其缺省值就是一個定值（坐標系所顯示出的最值），例子。

symbolBoundingData 可以是一個數組，例如 [-40, 60]，表示同時指定了正值的 symbolBoundingData 和負值的 symbolBoundingData。

此屬性可以被設置在系列的根部，表示對此系列中所有數據都生效；也可以被設置在 data 中的每個數據項中，表示只對此數據項生效。

參見如下示例：

ECharts象形柱圖

點擊編輯實例》》

例如：

series: [{
    symbolBoundingData: ... // 對 data 中所有數據項生效。 data: [23, 56] }]

或者：

series: [{
    data: [{
        value: 23 symbolBoundingData: ... // 只對此數據項生效 }, { value: 56 symbolBoundingData: ... // 只對此數據項生效 }] }]

symbolPatternSize

可以使用圖片作為圖形的 pattern。取值類型為 number，默認為：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' } } }

這時候，symbolPatternSize 指定了 pattern 的縮放尺寸。比如 symbolPatternSize 為 400 時表示圖片顯示為 400px * 400px 的尺寸。

例子：

ECharts象形柱圖

點擊編輯實例》》

此屬性可以被設置在系列的根部，表示對此系列中所有數據都生效；也可以被設置在 data 中的每個數據項中，表示只對此數據項生效。

例如：

series: [{
    symbolPatternSize: ... // 對 data 中所有數據項生效。 data: [23, 56] }]

或者：

series: [{
    data: [{
        value: 23 symbolPatternSize: ... // 只對此數據項生效 }, { value: 56 symbolPatternSize: ... // 只對此數據項生效 }] }]

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 支持的屬性，根據坐標系不同而不同。對於直角坐標系（cartesian2d），支持 x、y。對於極坐標系（polar），支持 radius、angle。對於地理坐標系（geo），支持 lng，lat。此外，均支持 tooltip 和 label 和 itemName（用於指定 tooltip 中數據項名稱）。

當使用 dimensions 給維度定義名稱后，encode 中可直接引用名稱，例如：

series: {
    type: 'xxx', dimensions: ['date', 'open', 'close', 'highest', 'lowest'], encode: { x: 'date', y: ['open', 'close', 'highest', 'lowest'] }, data: [ ... ] }

data[i]

系列中的數據內容數組。數組項通常為具體的數據項。

通常來說，數據用一個二維數組表示。如下，每一列被稱為一個『維度』。

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

在直角坐標系 (grid) 中『維度X』和『維度Y』會默認對應於 xAxis 和 yAxis。
在極坐標系 (polar) 中『維度X』和『維度Y』會默認對應於 radiusAxis 和 angleAxis。
后面的其他維度是可選的，可以在別處被使用，例如：
- 在 visualMap 中可以將一個或多個維度映射到顏色，大小等多個圖形屬性上。
- 在 series.symbolSize 中可以使用回調函數，基於某個維度得到 symbolSize 值。
- 使用 tooltip.formatter 或 series.label.normal.formatter 可以把其他維度的值展示出來。

特別地，當只有一個軸為類目軸（axis.type 為 'category'）的時候，數據可以簡化用一個一維數組表示。例如：

xAxis: {
    data: ['a', 'b', 'm', 'n'] }, series: [{ // 與 xAxis.data 一一對應。 data: [23, 44, 55, 19] // 它其實是下面這種形式的簡化： // data: [[0, 23], [1, 44], [2, 55], [3, 19]] }]

『值』與軸類型的關系：

當某維度對應於數值軸（axis.type 為 'value' 或者 'log'）的時候：
其值可以為 number（例如 12）。（也可以兼容 string 形式的 number，例如 '12'）

當某維度對應於類目軸（axis.type 為 'category'）的時候：
其值須為類目的『序數』（從 0 開始）或者類目的『字符串值』。例如：

 xAxis: {
      type: 'category', data: ['星期一', '星期二', '星期三', '星期四'] }, yAxis: { type: 'category', data: ['a', 'b', 'm', 'n', 'p', 'q'] }, series: [{ data: [ // xAxis yAxis [ 0, 0, 2 ], // 意思是此點位於 xAxis: '星期一', yAxis: 'a'。 [ '星期四', 2, 1 ], // 意思是此點位於 xAxis: '星期四', yAxis: 'm'。 [ 2, 'p', 2 ], // 意思是此點位於 xAxis: '星期三', yAxis: 'p'。 [ 3, 3, 5 ] ]  }]

雙類目軸的示例可以參考 Github Punchcard 示例。

當某維度對應於時間軸（type 為 'time'）的時候，值可以為：
- 一個時間戳，如 1484141700832，表示 UTC 時間。
- 或者字符串形式的時間描述：
  - ISO 8601 的子集，只包含這些形式（這幾種格式，除非指明時區，否則均表示本地時間，與 moment 一致）：
    - 部分年月日時間: '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'.
    - 時區設定: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
  - 其他的時間字符串，包括（均表示本地時間）: '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'
- 或者用戶自行初始化的 Date 實例：
  - 注意，用戶自行初始化 Date 實例的時候，瀏覽器的行為有差異，不同字符串的表示也不同。
  - 例如：在 chrome 中，new Date('2012-01-01') 表示 UTC 時間的 2012 年 1 月 1 日，而 new Date('2012-1-1') 和 new Date('2012/01/01') 表示本地時間的 2012 年 1 月 1 日。在 safari 中，不支持 new Date('2012-1-1')這種表示方法。
  - 所以，使用 new Date(dataString) 時，可使用第三方庫解析（如 moment），或者使用 echarts.number.parseDate，或者參見這里。
當需要對個別數據進行個性化定義時：

數組項可用對象，其中的 value 像表示具體的數值，如：
```
[
    12, 34, { value : 56, //自定義標簽樣式，僅對該數據項有效 label: {}, //自定義特殊 itemStyle，僅對該數據項有效 itemStyle:{} }, 10 ] // 或 [ [12, 33], [34, 313], { value: [56, 44], label: {}, itemStyle:{} }, [10, 33] ]
```
空值：

當某數據不存在時（ps：不存在不代表值為 0），可以用 '-' 或者 null 或者 undefined 或者 NaN 表示。

例如，無數據在折線圖中可表現為該點是斷開的，在其它圖中可表示為圖形不存在。

markPoint

圖表標注。

markLine

圖表標線。

markArea

圖表標域，常用於標記圖表中某個范圍的數據，例如標出某段時間投放了廣告。

zlevel

象形柱圖所有圖形的 zlevel 值。默認為 0。

zlevel用於 Canvas 分層，不同zlevel值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設置成一個單獨的zlevel。需要注意的是過多的 Canvas 會引起內存開銷的增大，在手機端上需要謹慎使用以防崩潰。

zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。

象形柱圖組件的所有圖形的z值，默認為2。控制圖形的前后順序。z值小的圖形會被z值大的圖形覆蓋。

z相比zlevel優先級更低，而且不會創建新的 Canvas。

silent

圖形是否不響應和觸發鼠標事件，默認為 false，即響應和觸發鼠標事件。

animation

是否開啟動畫。默認為 true

animationThreshold

是否開啟動畫的閾值，默認為 2000，當單個系列顯示的圖形數量大於這個閾值時會關閉動畫。

animationDuration

初始動畫的時長，默認為1000，支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的初始動畫效果：

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

animationEasing

初始動畫的緩動效果，默認為 cubicOut。不同的緩動效果可以參考緩動示例。

animationDurationUpdate

數據更新動畫的時長，默認為 300。

支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的更新動畫效果：

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

animationEasingUpdate

數據更新動畫的緩動效果，默認為 cubicOut。

tooltip

本系列特定的 tooltip 設定。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Echarts-柱狀圖柱圖寬度設置 echarts做雙柱圖 Echarts設置y軸值間隔以及設置 barWidth : 30,//柱圖寬度 echarts柱狀圖多柱重疊和多柱堆疊 echarts 點擊圖例對疊加柱圖排序 echarts相關屬性設置（3）環狀圖控制echarts 柱狀圖啊的柱條的寬度 Echarts案例：使用象形柱狀圖（PictorialBar）實現電池效果柱狀圖 echarts 立體柱 echarts圖類型設置