ECharts分段型视觉映射组件的属性

visualMap[i]-piecewise.type   |   string

[ default: piecewise ]

设置视觉映射组件的类型为分段型。

visualMap[i]-piecewise.show   |   boolean

[ default: true ]

是否显示 visualMap-piecewise 组件。如果设置为 false，不会显示，但是数据映射的功能还存在。

visualMap[i]-piecewise.splitNumber   |   number

[ default: 5 ]

对于分段型视觉映射组件中的连续型数据，会自动平均切分成几段。默认为5段。 连续数据的范围需要 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 的区间重叠，则会自动进行去重。         

在每个 piece 中支持的 visualMap 属性有：

• symbol: 图元的图形类别。
• symbolSize: 图元的大小。
• color: 图元的颜色。
• colorAlpha: 图元的颜色的透明度。
• opacity: 图元以及其附属物（如文字标签）的透明度。
• colorLightness: 颜色的明暗度，参见 HSL。
• colorSaturation: 颜色的饱和度，参见 HSL。
• colorHue: 颜色的色调，参见 HSL。

参见示例

（注：在 ECharts 2 中，pieces 叫做 splitList。现在后者仍兼容，但推荐使用 pieces）

pieces 中的顺序，其实试试就知道。若要看详细的规则，参见 visualMap.inverse。

visualMap[i]-piecewise.categories   |   Array

用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集。

当所指定的维度（visualMap-piecewise.dimension）的数据为离散型数据时，例如数据值为『优』、『良』等，那么可如下配置：

categories: ['严重污染', '重度污染', '中度污染', '轻度污染', '良', '优'],

参见示例

categories 中的顺序，其实试试就知道。若要看详细的规则，参见 visualMap.inverse。

visualMap[i]-piecewise.min   |   number

指定 visualMapPiecewise 组件的最小值。

在连续型数据自定义分段模式（即 visualMap-piecewise.pieces 被使用时）或离散数据根据类别分段模式（即 visualMap-piecewise.categories 被使用）时，max 和 min 不需指定。

在连续型数据平均分段模式（即 visualMap-piecewise.splitNumber 被使用时）需指定 min、max，如果不指定，则默认为 [0, 200]（注意并不是默认为 series.data 的 dataMin 和 dataMax）。

visualMap[i]-piecewise.max   |   number

指定 visualMapPiecewise 组件的最大值。参见 visualMap-piecewise.splitNumber

连续型数据自定义分段模式（即 visualMap-piecewise.pieces 被使用时）或 离散数据根据类别分段 模式（即 visualMap-piecewise.categories 被使用），max 和 min 不需指定。

连续型数据平均分段模式（即 visualMap-piecewise.splitNumber 被使用时）需指定 min、max，如果不指定，则默认为 [0, 200]（注意并不是默认为 series.data 的 dataMin 和 dataMax）。

visualMap[i]-piecewise.minOpen   |   boolean

当 type 为 piecewise 且使用 min/max/splitNumber 时，此参数有效。当值为 true 时，界面上会额外多出一个『< min』的选块。

visualMap[i]-piecewise.maxOpen   |   boolean

当 type 为 piecewise 且使用 min/max/splitNumber 时，此参数有效。当值为 true 时，界面上会额外多出一个『> max』的选块。

visualMap[i]-piecewise.selectedMode   |   string

[ default: 'multiple' ]

选择模式，可以是：

• 'multiple'（多选）。
• 'single'（单选）。

visualMap[i]-piecewise.inverse   |   boolean

[ default: false ]

是否反转。

• 连续型数据平均分段模式（即 visualMap-piecewise.splitNumber 被使用时），数据排布规则，同 visualMap-continuous.inverse。
• 连续型数据自定义分段模式（即 visualMap-piecewise.pieces 被使用）或离散数据根据类别分段模式（即 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 ]

数据展示的小数精度。

• 连续型数据平均分段模式（即 visualMap-piecewise.splitNumber 被使用时），精度根据数据自动适应。
• 连续型数据自定义分段模式（即 visualMap-piecewise.pieces 被使用）或离散数据根据类别分段模式（即 visualMap-piecewise.categories 被使用），精度默认为0（没有小数）。

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 中的顺序，其实试试就知道。若要看详细的规则，参见 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

指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组，例如：

[
    [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

指定取哪个系列的数据，即哪个系列的 series.data。

默认取所有系列。

visualMap[i]-piecewise.hoverLink   |   boolean

[ default: true ]

打开 hoverLink 功能时，鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮。

反之，鼠标悬浮到图表中的图形元素上时，在 visualMap 组件的相应位置会有三角提示其所对应的数值。

visualMap[i]-piecewise.zlevel   |   number

[ default: 0 ]

所有分段型视觉映射组件图形的 zlevel 值。

zlevel 用于 Canvas 分层，不同 zlevel 值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。

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

visualMap[i]-piecewise.z   |   number

[ default: 4 ]

分段型视觉映射组件的所有图形的 z 值。控制图形的前后顺序。z 值小的图形会被z值大的图形覆盖。

z 相比 zlevel 优先级更低，而且不会创建新的 Canvas。

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

[ default: 0 ]

visualMap 组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。

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

[ default: auto ]

visualMap 组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。

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 的内边距设置，单位为 px，默认各方向内边距为5，接受数组分别设定上右下左边距。

使用示例：

// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5，左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
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 中已经不推荐使用。它的功能已经移到了 visualMap-piecewise.inRange 和 visualMap-piecewise.outOfRange 中。

如果要使用，则须注意，color 属性中的顺序是由数值大到小，但是 visualMap-piecewise.inRange 或 visualMap-piecewise.outOfRange 中 color 的顺序，总是由数值小到大。二者不一致。

visualMap[i]-piecewise.textStyle   |   Object

设置分段型视觉映射组件的文字样式。详细的样式设置见：设置分段型视觉映射组件文字样式

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

分段型视觉映射组件标签的格式化工具。

• 如果为string，表示模板，例如：aaaa{value}bbbb{value2}。其中 {value} 和 {value2} 是当前的范围边界值。
• 如果为 Function，表示回调函数，形如：

formatter:function(value,value2){
    return 'aaaa'+ value +'bbbb'+ value2;// 范围标签显示内容。
}