codecamp

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[i]-piecewise.precision   |   number

[ default: null ]

数据展示的小数精度。

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。

默认取所有系列。

[ 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;// 范围标签显示内容。
}


设置ECharts视觉映射组件的文字样式
ECharts视觉元素怎么定义
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ECharts配置项.setOption

ECharts图例组件配置项

ECharts图例组件配置 文本样式

ECharts xAxis配置 直角坐标系x轴

ECharts xAxis配置 x坐标轴名称的文本样式

ECharts xAxis配置 设置x坐标轴轴线

ECharts xAxis配置 x坐标轴刻度设置

ECharts xAxis配置 x坐标轴刻度标签设置

xAxis配置x坐标轴分隔线

xAxis配置坐标轴分隔区域设置

xAxis配置类目数据

ECharts xAxis配置 类目标签的文本样式

ECharts极坐标系的径向轴

如何使用dataZoom组件

ECharts工具栏组件(toolbox)

ECharts工具栏的feature属性

ECharts导出图片的操作

ECharts的数据视图工具

ECharts数据区域缩放工具

ECharts动态类型切换工具

ECharts区域选择组件(brush)

ECharts系列列表:平行坐标系

ECharts系列:主题河流图

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }