ECharts分段型視覺映射組件的屬性

visualMap[i]-piecewise.type   |   string

[ default: piecewise ]

設置視覺映射組件的類型為分段型。

visualMap[i]-piecewise.show   |   boolean

[ default: true ]

是否顯示 visualMap-piecewise 組件。如果設置為 false，不會顯示，但是數(shù)據(jù)映射的功能還存在。

visualMap[i]-piecewise.splitNumber   |   number

[ default: 5 ]

對于分段型視覺映射組件中的連續(xù)型數(shù)據(jù)，會自動平均切分成幾段。默認為5段。 連續(xù)數(shù)據(jù)的范圍需要 max 和 min 來指定。

如果設置了 visualMap-piecewise.pieces 或者 visualMap-piecewise.categories，則 splitNumber 無效。

visualMap[i]-piecewise.pieces   |   Array

自定義『分段式視覺映射組件（visualMapPiecewise）』的每一段的范圍，以及每一段的文字，以及每一段的特別的樣式。例如：

pieces: [
    {min: 1500}, // 不指定 max，表示 max 為無限大（Infinity）。
    {min: 900, max: 1500},
    {min: 310, max: 1000},
    {min: 200, max: 300},
    {min: 10, max: 200, label: '10 到 200（自定義label）'},
    {value: 123, label: '123（自定義特殊顏色）', color: 'grey'}, // 表示 value 等于 123 的情況。
    {max: 5}     // 不指定 min，表示 min 為無限大（-Infinity）。
]

或者，更精確得，可以使用 lt（小于，little than），gt（大于，greater than），lte（小于等于 lettle than or equals），gte（大于等于，greater than or equals）來表達邊界：

pieces: [
    {gt: 1500},            // (1500, Infinity]
    {gt: 900, lte: 1500},  // (900, 1500]
    {gt: 310, lte: 1000},  // (310, 1000]
    {gt: 200, lte: 300},   // (200, 300]
    {gt: 10, lte: 200, label: '10 到 200（自定義label）'},       // (10, 200]
    {value: 123, label: '123（自定義特殊顏色）', color: 'grey'},  // [123, 123]
    {lt: 5}                 // (-Infinity, 5)
]

注意，如果兩個 piece 的區(qū)間重疊，則會自動進行去重。         

在每個 piece 中支持的 visualMap 屬性有：

• symbol: 圖元的圖形類別。
• symbolSize: 圖元的大小。
• color: 圖元的顏色。
• colorAlpha: 圖元的顏色的透明度。
• opacity: 圖元以及其附屬物（如文字標簽）的透明度。
• colorLightness: 顏色的明暗度，參見 HSL。
• colorSaturation: 顏色的飽和度，參見 HSL。
• colorHue: 顏色的色調(diào)，參見 HSL。

參見示例

（注：在 ECharts 2 中，pieces 叫做 splitList?，F(xiàn)在后者仍兼容，但推薦使用 pieces）

pieces 中的順序，其實試試就知道。若要看詳細的規(guī)則，參見 visualMap.inverse。

visualMap[i]-piecewise.categories   |   Array

用于表示離散型數(shù)據(jù)（或可以稱為類別型數(shù)據(jù)、枚舉型數(shù)據(jù)）的全集。

當所指定的維度（visualMap-piecewise.dimension）的數(shù)據(jù)為離散型數(shù)據(jù)時，例如數(shù)據(jù)值為『優(yōu)』、『良』等，那么可如下配置：

categories: ['嚴重污染', '重度污染', '中度污染', '輕度污染', '良', '優(yōu)'],

參見示例

categories 中的順序，其實試試就知道。若要看詳細的規(guī)則，參見 visualMap.inverse。

visualMap[i]-piecewise.min   |   number

指定 visualMapPiecewise 組件的最小值。

在連續(xù)型數(shù)據(jù)自定義分段模式（即 visualMap-piecewise.pieces 被使用時）或離散數(shù)據(jù)根據(jù)類別分段模式（即 visualMap-piecewise.categories 被使用）時，max 和 min 不需指定。

在連續(xù)型數(shù)據(jù)平均分段模式（即 visualMap-piecewise.splitNumber 被使用時）需指定 min、max，如果不指定，則默認為 [0, 200]（注意并不是默認為 series.data 的 dataMin 和 dataMax）。

visualMap[i]-piecewise.max   |   number

指定 visualMapPiecewise 組件的最大值。參見 visualMap-piecewise.splitNumber

連續(xù)型數(shù)據(jù)自定義分段模式（即 visualMap-piecewise.pieces 被使用時）或 離散數(shù)據(jù)根據(jù)類別分段 模式（即 visualMap-piecewise.categories 被使用），max 和 min 不需指定。

連續(xù)型數(shù)據(jù)平均分段模式（即 visualMap-piecewise.splitNumber 被使用時）需指定 min、max，如果不指定，則默認為 [0, 200]（注意并不是默認為 series.data 的 dataMin 和 dataMax）。

visualMap[i]-piecewise.minOpen   |   boolean

當 type 為 piecewise 且使用 min/max/splitNumber 時，此參數(shù)有效。當值為 true 時，界面上會額外多出一個『< min』的選塊。

visualMap[i]-piecewise.maxOpen   |   boolean

當 type 為 piecewise 且使用 min/max/splitNumber 時，此參數(shù)有效。當值為 true 時，界面上會額外多出一個『> max』的選塊。

visualMap[i]-piecewise.selectedMode   |   string

[ default: 'multiple' ]

選擇模式，可以是：

• 'multiple'（多選）。
• 'single'（單選）。

visualMap[i]-piecewise.inverse   |   boolean

[ default: false ]

是否反轉。

• 連續(xù)型數(shù)據(jù)平均分段模式（即 visualMap-piecewise.splitNumber 被使用時），數(shù)據(jù)排布規(guī)則，同 visualMap-continuous.inverse。
• 連續(xù)型數(shù)據(jù)自定義分段模式（即 visualMap-piecewise.pieces 被使用）或離散數(shù)據(jù)根據(jù)類別分段模式（即 visualMap-piecewise.categories 被使用），每個塊的排布位置，取決于 pieces 或 categories 列表的定義順序，即：當inverse為false時：當  visualMap.orient 為 'vertical' 時，pieces[0] 或 categories[0]對應『上方』當 visualMap.orient 為 'horizontal' 時，pieces[0] 或 categories[0] 對應『左方』。當 inverse 為 true 時，與上面相反。

其實沒有那么復雜，使用時候，試試就知道了。

visualMap[i]-piecewise.precision   |   number

[ default: null ]

數(shù)據(jù)展示的小數(shù)精度。

• 連續(xù)型數(shù)據(jù)平均分段模式（即 visualMap-piecewise.splitNumber 被使用時），精度根據(jù)數(shù)據(jù)自動適應。
• 連續(xù)型數(shù)據(jù)自定義分段模式（即 visualMap-piecewise.pieces 被使用）或離散數(shù)據(jù)根據(jù)類別分段模式（即 visualMap-piecewise.categories 被使用），精度默認為0（沒有小數(shù)）。

visualMap[i]-piecewise.itemWidth   |   number

[ default: 20 ]

分段型視覺映射組件圖形的寬度，即每個小塊的寬度。

visualMap[i]-piecewise.itemHeight   |   number

[ default: 14 ]

分段型視覺映射組件圖形的高度，即每個小塊的高度。

visualMap[i]-piecewise.align   |   string

[ default: 'auto' ]

指定分段型視覺映射組件中圖形（比如小方塊）和文字的擺放關系，可選值為：

• 'auto' 自動決定。
• 'left' 圖形在左文字在右。
• 'right' 圖形在右文字在左。

visualMap[i]-piecewise.text    |   Array

[ default: null ]

分段型視覺映射組件兩端的文本，如['High', 'Low']。參見例子。

text 中的順序，其實試試就知道。若要看詳細的規(guī)則，參見 visualMap.inverse。

兼容 ECharts 2，當有 text 時，label 不顯示。

visualMap[i]-piecewise.textGap   |   Array

[ default: 10 ]

分段型視覺映射組件兩端文字主體之間的距離，單位為 px。參見 visualMap-piecewise.text

visualMap[i]-piecewise.showLabel   |   boolean

是否顯示每項的文本標簽。默認情況是，如果 visualMap-piecewise.text 被使用則不顯示文本標簽，否則顯示。

visualMap[i]-piecewise.itemGap   |   number

[ default: 10 ]

分段型視覺映射組件每兩個圖元之間的間隔距離，單位為 px。

visualMap[i]-piecewise.itemSymbol   |   string

[ default: 'roundRect' ]

默認的圖形。可選值為： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'。

symbol 的設置參見 visualMap-piecewise.inRange 和 visualMap-piecewise.outOfRange。

當他們沒有進行指定時，取此 itemSymbol 為默認值（但是只在 visualMap 組件上使用，不在 chart 中使用）。

visualMap[i]-piecewise.dimension   |   number

指定用數(shù)據(jù)的『哪個維度』，映射到視覺元素上。『數(shù)據(jù)』即 series.data。 可以把 series.data 理解成一個二維數(shù)組，例如：

[
    [12, 23, 43],
    [12, 23, 43],
    [43, 545, 65],
    [92, 23, 33]
]

其中每個列是一個維度，即 dimension。 例如 dimension 為 1 時，取第二列（即 23，23，545，23），映射到視覺元素上。

默認取 data 中最后一個維度。

visualMap[i]-piecewise.seriesIndex   |   number, Array

指定取哪個系列的數(shù)據(jù)，即哪個系列的 series.data。

默認取所有系列。

visualMap[i]-piecewise.hoverLink   |   boolean

[ default: true ]

打開 hoverLink 功能時，鼠標懸浮到 visualMap 組件上時，鼠標位置對應的數(shù)值 在 圖表中對應的圖形元素，會高亮。

反之，鼠標懸浮到圖表中的圖形元素上時，在 visualMap 組件的相應位置會有三角提示其所對應的數(shù)值。

visualMap[i]-piecewise.zlevel   |   number

[ default: 0 ]

所有分段型視覺映射組件圖形的 zlevel 值。

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

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

visualMap[i]-piecewise.z   |   number

[ default: 4 ]

分段型視覺映射組件的所有圖形的 z 值?？刂茍D形的前后順序。z 值小的圖形會被z值大的圖形覆蓋。

z 相比 zlevel 優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。

visualMap[i]-piecewise.left   |   string, number

[ default: 0 ]

visualMap 組件離容器左側的距離。

left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值為'left', 'center', 'right'，組件會根據(jù)相應的位置自動對齊。

visualMap[i]-piecewise.top   |   string, number

[ default: auto ]

visualMap 組件離容器上側的距離。

top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值為'top', 'middle', 'bottom'，組件會根據(jù)相應的位置自動對齊。

visualMap[i]-piecewise.right   |   string, number

[ default: auto ]

visualMap 組件離容器右側的距離。

right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。

visualMap[i]-piecewise.bottom   |   string, number

[ default: 0 ]

visualMap 組件離容器下側的距離。

bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。

visualMap[i]-piecewise.orient   |   string

[ default: 'vertical' ]

如何放置 visualMap 組件，水平（'horizontal'）或者豎直（'vertical'）。

visualMap[i]-piecewise.padding   |   number, Array

[ default: 5 ]

visualMap-piecewise 的內(nèi)邊距設置，單位為 px，默認各方向內(nèi)邊距為5，接受數(shù)組分別設定上右下左邊距。

使用示例：

// 設置內(nèi)邊距為 5
padding: 5
// 設置上下的內(nèi)邊距為 5，左右的內(nèi)邊距為 10
padding: [5, 10]
// 分別設置四個方向的內(nèi)邊距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

visualMap[i]-piecewise.backgroundColor   |   Color

[ default: 'rgba(0,0,0,0)' ]

分段型視覺映射組件的背景色設置。

visualMap[i]-piecewise.borderColor   |   Color

[ default: '#ccc' ]

設置分段型視覺映射組件邊框顏色。

visualMap[i]-piecewise.borderWidth   |   number

[ default: 0 ]

設置分段型視覺映射組件邊框線寬，單位為 px。

visualMap[i]-piecewise.color   |   Array

[ default: ['#bf444c', '#d88273', '#f6efa6'] ]

這個配置項，是為了兼容 ECharts 2 而存在，ECharts 3 中已經(jīng)不推薦使用。它的功能已經(jīng)移到了 visualMap-piecewise.inRange 和 visualMap-piecewise.outOfRange 中。

如果要使用，則須注意，color 屬性中的順序是由數(shù)值大到小，但是 visualMap-piecewise.inRange 或 visualMap-piecewise.outOfRange 中 color 的順序，總是由數(shù)值小到大。二者不一致。

visualMap[i]-piecewise.textStyle   |   Object

設置分段型視覺映射組件的文字樣式。詳細的樣式設置見：設置分段型視覺映射組件文字樣式

visualMap[i]-piecewise.formatter   |   string, Function

分段型視覺映射組件標簽的格式化工具。

• 如果為string，表示模板，例如：aaaa{value}bbbb{value2}。其中 {value} 和 {value2} 是當前的范圍邊界值。
• 如果為 Function，表示回調(diào)函數(shù)，形如：

formatter:function(value,value2){
    return 'aaaa'+ value +'bbbb'+ value2;// 范圍標簽顯示內(nèi)容。
}