{{target: component-visual-map-piecewise}}
**Piecewise visualMap component (visualMapPiecewise) **
(Reference to the introduction of visual Map component (visualMap))
Sample: ~600x400
Piecewise visualMap component works in one of the three modes:
Used to determine it is a piecewise visualMap component.
{{use: partial-component-id(prefix=“#”)}}
Continuous data can be divide into pieces averagely according to splitNumber, that is, if splitNumber is 5, data will be sliced into 5 pieces.
The range of continuous data should be defined by max and min.
If visualMap-piecewise.pieces or visualMap-piecewise.categories is set up, the splitNumber
will not be used any more.
Used to customize how to slice continuous data, and some specific view style for some pieces. For instance:
pieces: [ // Range of a piece can be specified by property min and max, // where min will be set as -Infinity if ignored, // and max will be set as Infinity if ignored. {min: 1500}, {min: 900, max: 1500}, {min: 310, max: 1000}, {min: 200, max: 300}, // Label of the piece can be specified. {min: 10, max: 200, label: '10 to 200 (custom label) '}, // Color of the piece can be specified. {value: 123, label: '123 (custom special color) ', color: 'grey'}, {max: 5} ]
These visual channel can be customized in each piece:
{{use: partial-visual-map-visual-type}}
(Notes: In ECharts2, pieces
is called splitList
, which is retained in ECharts3 for compatibility. But pieces
is recommended.)
You would realize the sequence in pieces
by a simple trial. See more detailed rules in visualMap.inverse.
When dataValues in series.data (specified by visualMap-piecewise.dimension) are discrete (or also known as category data or enumerable data), and we intend to perform Table Mapping from dataValue to visual channels, categories
is used to describe the entire enumeration of data. For instance:
categories: [ 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin' ],
You would realize the sequence in categories
by a simple trial. See more detailed rules in visualMap.inverse.
Specify the min dataValue for the visualMap component. [visualMap.min, visualMax.max]
make up the domain of viusul mapping.
In CONTINUOUS-CUSTOMIZED mode (i.e., visualMap-piecewise.pieces is used) or CATEGORY mode (i.e., visualMap-piecewise.categories is used), max
and min
doesn't need to be specified.
In CONTINUOUS-AVERAGE mode (i.e., visualMap-piecewise.splitNumber is used), they should be specified explicitly, and be [0, 200]
by default, but not dataMin
and dataMax
in series.data.
Specify the max dataValue for the visualMap component. [visualMap.min, visualMax.max]
make up the domain of viusul mapping.
In CONTINUOUS-CUSTOMIZED mode (i.e., visualMap-piecewise.pieces is used) or CATEGORY mode (i.e., visualMap-piecewise.categories is used), max
and min
doesn't need to be specified.
In CONTINUOUS-AVERAGE mode (i.e., visualMap-piecewise.splitNumber is used), they should be specified explicitly, and be [0, 200]
by default, but not dataMin
and dataMax
in series.data.
This option works when type
is piecewise
and min
/max
/splitNumber
are set.
If it is set as true
, an extra piece labeled with “< min” will show.
This option works when type
is piecewise
and min
/max
/splitNumber
are set.
If it is set as true
, an extra piece labeled with “> max” will show.
Selected Mode could be:
'multiple'
(multiple selection).'single'
(single selection).Whether to inverse the layout of visualMap component.
In CONTINUOUS-AVERAGE mode (i.e., visualMap-piecewise.splitNumber is used), the rule of data layout is the same as visualMap-continuous.inverse.
In CONTINUOUS-CUSTOMIZED mode (i.e., visualMap-piecewise.pieces is used) or CATEGORY mode (i.e., visualMap-piecewise.categories is used), the layout of each piece is determined by the their order in the definition of pieces
or categories
, namely:
When inverse
is false
:
When visualMap.orient is 'vertical'
, pieces[0] or categories[0] correspond to upward side.
When visualMap.orient is 'horizontal'
, pieces[0] or categories[0] correspond to left side.
When inverse
is true
, the results are opposite to above.
If you just have a try, you'll know it is not so complicated.
The decimal precision of label, defaults to be 0 (no decimals).
In CONTINUOUS-AVERAGE mode (i.e., visualMap-piecewise.splitNumber is used), the rule of data layout is the same as visualMap-continuous.inverse, decimal percision auto adapts to series.data.
In CONTINUOUS-CUSTOMIZED mode (i.e., visualMap-piecewise.pieces is used) or CATEGORY mode (i.e., visualMap-piecewise.categories is used), decimal percision defaults to be 0 (no decimals):
The width of each graphical element that represents a piece.
The height of each graphical element that represents a piece.
The layout relationship between the graphical elements for pieces and their labels. Possible values are:
'auto'
Decide automatically.'left'
The graphical elements for pieces are on the left and their labels are on the right.'right'
The graphical elements for pieces are on the right and their labels are on the left.The label text on both ends, such as ['High', 'Low']
. Sample.
You can understand the order of items in text
array just by a simple trial. See visualMap.inverse.
The rule, that labels will not show when text
is use, is retained for compatibility with ECharts2.
The distance between the ends of the graphical elements for pieces and the labels, with unit px. See visualMap-piecewise.text
Whether to show label of each item. By defualt, label will not be shown when visualMap-piecewise.text used, otherwise label will be shown.
Its the distance between each two graphical elements for pieces. The unit is px.
Default symbol (the shape of graphical element). Possible values are:
{{ import: partial-icon-buildin}}
The setting of visual channel symbol
can refer to visualMap-piecewise.inRange and visualMap-piecewise.outOfRange.
When they are not specified, itemSymbol
is adopted as the default value (but just used in visualMap component itself, not in chart).
{{ use: partial-visual-map-common( visualMapName=‘visualMap-piecewise’, galleryEditorPath=${galleryEditorPath} ) }}
the formatter tool for label.
If it was set as a string
, it refers to a template, for instance: aaaa{value}bbbb{value2}
, where {value}
and {value2}
represents the current seleted range of dataValues.
If it was set as a Function
, it refers to a callback function, for instance:
formatter: function (value, value2) { return 'aaaa' + value + 'bbbb' + value2; }