分段型视觉映射组件的属性
编辑教程分段型视觉映射组件的属性
visualMap[i]-piecewise.type
string [ 默认值: piecewise ]
设置视觉映射组件的类型为分段型。
visualMap[i]-piecewise.show
boolean [ 默认值: true ]
是否显示 visualMap-piecewise 组件。如果设置为 false,不会显示,但是数据映射的功能还存在。
visualMap[i]-piecewise.splitNumber
number [ 默认值: 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: | 颜色的明暗度 |
colorSaturation: | 颜色的饱和度 |
colorHue: | 颜色的色调 |
(注:在 ECharts 2 中,pieces 叫做 splitList。现在后者仍兼容,但推荐使用 pieces)
pieces 中的顺序,其实试试就知道。
visualMap[i]-piecewise.categories
Array 用于表示离散型数据(或可以称为类别型数据、枚举型数据)的全集。
当所指定的维度(visualMap-piecewise.dimension)的数据为离散型数据时,例如数据值为『优』、『良』等,那么可如下配置:
categories: ['严重污染', '重度污染', '中度污染', '轻度污染', '良', '优'],
categories 中的顺序,其实试试就知道。
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 [ 默认值: 'multiple' ]
选择模式,可以是:
'multiple'(多选)。 'single'(单选)。
visualMap[i]-piecewise.inverse
boolean [ 默认值: 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 [ 默认值: null ]
数据展示的小数精度。
连续型数据平均分段模式(即 visualMap-piecewise.splitNumber 被使用时),精度根据数据自动适应。
连续型数据自定义分段模式(即 visualMap-piecewise.pieces 被使用)或离散数据根据类别分段模式(即 visualMap-piecewise.categories 被使用),精度默认为0(没有小数)。
visualMap[i]-piecewise.itemWidth
number [ 默认值: 20 ]
分段型视觉映射组件图形的宽度,即每个小块的宽度。
visualMap[i]-piecewise.itemHeight
number [ 默认值: 14 ]
分段型视觉映射组件图形的高度,即每个小块的高度。
visualMap[i]-piecewise.align
string [ 默认值: 'auto' ]
指定分段型视觉映射组件中图形(比如小方块)和文字的摆放关系,可选值为:
- 'auto' 自动决定。
- 'left' 图形在左文字在右。
- 'right' 图形在右文字在左。
visualMap[i]-piecewise.text
Array [ 默认值: null ]
分段型视觉映射组件两端的文本,如['High', 'Low']。参见例子。
text 中的顺序,其实试试就知道。若要看详细的规则,参见 visualMap.inverse。
兼容 ECharts 2,当有 text 时,label 不显示。
visualMap[i]-piecewise.textGap
Array [ 默认值: 10 ]
分段型视觉映射组件两端文字主体之间的距离,单位为 px。参见 visualMap-piecewise.text
visualMap[i]-piecewise.showLabel
boolean 是否显示每项的文本标签。默认情况是,如果 visualMap-piecewise.text 被使用则不显示文本标签,否则显示。
visualMap[i]-piecewise.itemGap
number [ 默认值: 10 ]
分段型视觉映射组件每两个图元之间的间隔距离,单位为 px。
visualMap[i]-piecewise.itemSymbol
string [ 默认值: '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 [ 默认值: true ]
打开 hoverLink 功能时,鼠标悬浮到 visualMap 组件上时,鼠标位置对应的数值 在 图表中对应的图形元素,会高亮。
反之,鼠标悬浮到图表中的图形元素上时,在 visualMap 组件的相应位置会有三角提示其所对应的数值。
visualMap[i]-piecewise.zlevel
number [ 默认值: 0 ]
所有分段型视觉映射组件图形的 zlevel 值。
zlevel 用于 Canvas 分层,不同 zlevel 值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。
可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
visualMap[i]-piecewise.z
number [ 默认值: 4 ]
分段型视觉映射组件的所有图形的 z 值。控制图形的前后顺序。z 值小的图形会被z值大的图形覆盖。
z 相比 zlevel 优先级更低,而且不会创建新的 Canvas。
visualMap[i]-piecewise.left
string, number [ 默认值: 0 ]
visualMap 组件离容器左侧的距离。
left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'。
如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。
visualMap[i]-piecewise.top
string, number [ 默认值: auto ]
visualMap 组件离容器上侧的距离。
top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'。
如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。
visualMap[i]-piecewise.right
string, number [ 默认值: auto ]
visualMap 组件离容器右侧的距离。
right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。
visualMap[i]-piecewise.bottom
string, number [ 默认值: 0 ]
visualMap 组件离容器下侧的距离。
bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。
visualMap[i]-piecewise.orient
string [ 默认值: 'vertical' ]
如何放置 visualMap 组件,水平('horizontal')或者竖直('vertical')。
visualMap[i]-piecewise.padding
number, Array [ 默认值: 5 ]
visualMap-piecewise 的内边距设置,单位为 px,默认各方向内边距为5,接受数组分别设定上右下左边距。
使用示例:
// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
visualMap[i]-piecewise.backgroundColor
Color [ 默认值: 'rgba(0,0,0,0)' ]
分段型视觉映射组件的背景色设置。
visualMap[i]-piecewise.borderColor
Color [ 默认值: '#ccc' ]
设置分段型视觉映射组件边框颜色。
visualMap[i]-piecewise.borderWidth
number [ 默认值: 0 ]
设置分段型视觉映射组件边框线宽,单位为 px。
visualMap[i]-piecewise.color
Array [ 默认值: ['#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;// 范围标签显示内容。
}
![](http://cdns.jsrun.net/avatar/default.png)
选择支付方式:
![支付宝](/res/css/img/alipay.png)
![微信](/res/css/img/wxpay.png)
![支付宝](/res/css/img/alipay.png)
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间