ipecharts.option.seriesitems.pictorialbar module#

class ipecharts.option.seriesitems.pictorialbar.PictorialBar(**kwargs: Any)[source]#

Bases: BaseWidget

Warning:: Autogenerated class

pictorial bar chart

Pictorial bar chart is a type of bar chart that customized glyph (like images, [SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData)) can be used instead of rectangular bar. This kind of chart is usually used in infographic.

Pictorial bar chart can only be used in [rectangular coordinate](#grid) with at least 1 category axis.

Example:

Layout

Basically pictorialBar is a type of bar chart, which follows the bar chart layout. In pictorialBar, each bar is named as reference bar, which does not be shown, but only be used as a reference for layout of pictorial graphic elements. Each pictorial graphic element is positioned with respect to its reference bar according to the setting of [symbolPosition](#series-pictorialBar.symbolPosition)、[symbolOffset](#series-pictorialBar.symbolOffset).

See the example below:

[symbolSize](#series-pictorialBar.symbolSize) is used to specify the size of graphic elements.

See the example below:

Graphic types

[symbolRepeat](#series-pictorialBar.symbolRepeat) can be

Graphic elements can be set as ‘repeat’ or not by [symbolRepeat](#series-pictorialBar.symbolRepeat).

If set as false (default), a single graphic element is used to represent a data item.
If set as true, a group of repeat graphic elements are used to represent a data item.

See the example below:

Each graphic element can be basic shape (like ‘circle’, ‘rect’, …), or [SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData), or image. See [symbolType](#series-pictorialBar.symbolType).

See the example below:

[symbolClip](#series-pictorialBar.symbolClip) can be used to clip graphic elements.

See the example below:

type Unicode('pictorialBar')#

id Unicode(None)#: Component ID, not specified by default. If specified, it can be used to refer the component in option or API.

name Unicode(None)#: Series name used for displaying in [tooltip](#tooltip) and filtering with [legend](#legend), or updating data and configuration with setOption.

colorBy Unicode(None)#

> Since v5.2.0

The policy to take color from [option.color](#color). Valid values:

‘series’: assigns the colors in the palette by series, so that all data in the same series are in the same color;
‘data’: assigns colors in the palette according to data items, with each data item using a different color.

legendHoverLink Bool(None)#: Whether to enable highlighting chart when [legend](#legend) is being hovered.

coordinateSystem Unicode(None)#

The coordinate used in the series, whose options are:

‘cartesian2d’

Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with [xAxisIndex](#series-pictorialBar.xAxisIndex) and [yAxisIndex](#series-pictorialBar.yAxisIndex) to assign the corresponding axis component.

xAxisIndex Float(None)#: Index of [x axis](#xAxis) to combine with, which is useful for multiple x axes in one chart.

yAxisIndex Float(None)#: Index of [y axis](#yAxis) to combine with, which is useful for multiple y axes in one chart.

cursor Unicode(None)#: The mouse style when mouse hovers on an element, the same as cursor property in CSS.

label Dict()#: Text label of , to explain some data information about graphic item like value, name and so on. label is placed under itemStyle in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, label`is taken to be at the same level with `itemStyle, and has emphasis as itemStyle does.

labelLine Dict()#

> Since v5.0.0

Configuration of label guide line.

labelLayout Union(None)#

> Since v5.0.0

Unified layout configuration of labels.

It provide a chance to adjust the labels’ (x, y) position, alignment based on the original layout each series provides.

This option can be a callback with following parameters.

``` // corresponding index of data dataIndex: number // corresponding type of data. Only available in graph, in which it can be ‘node’ or ‘edge’ dataType?: string // corresponding index of series seriesIndex: number // Displayed text of label. text: string // Bounding rectangle of label. labelRect: {x: number, y: number, width: number, height: number} // Horizontal alignment of label. align: ‘left’ | ‘center’ | ‘right’ // Vertical alignment of label. verticalAlign: ‘top’ | ‘middle’ | ‘bottom’ // Bounding rectangle of the element corresponding to. rect: {x: number, y: number, width: number, height: number} // Default points array of labelLine. Currently only provided in pie and funnel series. // It’s null in other series. labelLinePoints?: number[][]

```

Example:

Align the labels on the right. Left 10px margin to the edge.

``` labelLayout(params) {

return {
x: params.rect.x + 10, y: params.rect.y + params.rect.height / 2, verticalAlign: ‘middle’, align: ‘left’

}

}

```

Set the text size based on the size of element bounding rectangle.

```

labelLayout(params) {

return {: fontSize: Math.max(params.rect.width / 10, 5)

};

}

```

itemStyle Dict()#: Graphic style of , emphasis is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.

emphasis Dict()#: Configurations of emphasis state.

blur Dict()#

> Since v5.0.0

Configurations of blur state. Available when [emphasis.focus](#series-pictorialBar.emphasis.focus) is set.

select Dict()#

> Since v5.0.0

Configurations of select state. Available when [selectedMode](#series-pictorialBar.selectedMode) is set.

selectedMode Union(None)#

> Since v5.0.0

Selected mode. It is disabled by default, and you may set it to be true to enable it.

Besides, it can be set to ‘single’, ‘multiple’ or ‘series’, for single selection, multiple selections and whole series selection.

> ‘series’ is supported since v5.3.0

barWidth Union(None)#

The width of the bar. Adaptive when not specified.

Can be an absolute value like 40 or a percent value like ‘60%’. The percent is based on the calculated category width.

In a single coordinate system, this attribute is shared by multiple ‘pictorialBar’ series. This attribute should be set on the last ‘pictorialBar’ series in the coordinate system, then it will be adopted by all ‘pictorialBar’ series in the coordinate system.

barMaxWidth Union(None)#

The maximum width of the bar.

Has higher priority than [barWidth](#series-bar.barWidth).

Can be an absolute value like 40 or a percent value like ‘60%’. The percent is based on the calculated category width.

barMinWidth Union(None)#

The minimum width of the bar. In cartesian the default value is 1, otherwise the default value if null.

Has higher priority than [barWidth](#series-bar.barWidth).

Can be an absolute value like 40 or a percent value like ‘60%’. The percent is based on the calculated category width.

barMinHeight Float(None)#: The minimum width of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small.

barMinAngle Float(None)#: The minimum angle of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small. Valid only for bar series on polar coordinates.

barGap Unicode(None)#

The gap between bars between different series, is a percent value like ‘20%’, which means 20% of the bar width.

Set barGap as ‘-100%’ can overlap bars that belong to different series, which is useful when making a series of bar be background.

For example:

barCategoryGap Union(None)#

The bar gap of a single series, by default, a suitable spacing is calculated based on the number of series in the bar chart. When there are more series, the spacing will be appropriately reduced, can be set as a fixed value.

symbol Unicode(None)#

Specify the type of graphic elements.

Icon types provided by ECharts includes

‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’

It can be set to an image with ‘image://url’ , in which URL is the link to an image, or dataURI of an image.

An image URL example:

``` ‘image://http://example.website/a/b.png’

```

A dataURI example:

``` ‘image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7’

```

Icons can be set to arbitrary vector path via ‘path://’ in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to [SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData) for more information about the format of the path. You may export vector paths from tools like Adobe

For example:

``` ‘path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z’

```

Example:

This attribute can be set at the [root level of a series](#series-pictorialBar.symbol), where all data items in the series will be affected by this attribute. And this attribute can also be set at [each data item](#series-pictorialBar.data.symbol) in <series-pictorialBar.data>, where only the data item is affected by this attribute.

For example:

``` series: [{

symbol: … // Affect all data items. data: [23, 56]

}] // Or series: [{

data: [{
value: 23 symbol: … // Only affect this data item.

}, {
value: 56 symbol: … // Only affect this data item.

}]

}]

```

symbolSize Union(None)#

Symbol size.

It can be set as a array, which means [width, height]. For example, [20, 10] means width 20 and height 10. It can also be set as a single number, like 10, which is equivalent to [10, 10].

Absolute value can be used (like 10), or percent value can be used (like ‘120%’, [‘55%’, 23]).

When percent value is used, final size of the graphic element is calculated based on its [reference bar](#series-pictorialBar).

For example, there is a reference bar based on x axis (that is, it is a vertical bar), and [symbolSize](#series-pictorialBar.symbolSize) is set as [‘30%’, ‘50%’], the final size of its graphic elements is:

width: <width of reference bar> * 30%.
height: + If [symbolRepeat](#series-pictorialBar.symbolRepeat) is used: <height of reference bar> * 50%. + If [symbolRepeat](#series-pictorialBar.symbolRepeat) is not used: <height of reference bar> * 50%.

Analogously, the case that based on y axis can be obtained by exchanging them.

For example:

This attribute can be set at the [root level of a series](#series-pictorialBar.symbolSize), where all data items in the series will be affected by this attribute. And this attribute can also be set at [each data item](#series-pictorialBar.data.symbolSize) in <series-pictorialBar.data>, where only the data item is affected by this attribute.

For example:

``` series: [{

symbolSize: … // Affect all data items. data: [23, 56]

}] // Or series: [{

data: [{
value: 23 symbolSize: … // Only affect this data item.

}, {
value: 56 symbolSize: … // Only affect this data item.

}]

}]

```

symbolPosition Unicode(None)#

Specify the location of the graphic elements. Optional values:

‘start’: The edge of graphic element inscribes with the start of the reference bar.
‘end’: The edge of graphic element inscribes with the end of the reference bar.
‘center’: The graphic element is at the center of the reference bar.

For example:

This attribute can be set at the [root level of a series](#series-pictorialBar.symbolPosition), where all data items in the series will be affected by this attribute. And this attribute can also be set at [each data item](#series-pictorialBar.data.symbolPosition) in <series-pictorialBar.data>, where only the data item is affected by this attribute.

For example:

``` series: [{

symbolPosition: … // Affect all data items. data: [23, 56]

}] // Or series: [{

data: [{
value: 23 symbolPosition: … // Only affect this data item.

}, {
value: 56 symbolPosition: … // Only affect this data item.

}]

}]

```

symbolOffset Any(None)#

Specify the offset of graphic element according to its original position. Adopting symbolOffset is the final step in layout, which enables adjustment of graphic element position.

A absolute value can be set (like 10), or a percent value can be set (like ‘120%’、[‘55%’, 23]), which is based on its [symbolSize](#series-pictorialBar.symbolSize).

For example, [0, ‘-50%’] means the graphic element will be adjusted upward half of the size of itself.

For example:

This attribute can be set at the [root level of a series](#series-pictorialBar.symbolOffset), where all data items in the series will be affected by this attribute. And this attribute can also be set at [each data item](#series-pictorialBar.data.symbolOffset) in <series-pictorialBar.data>, where only the data item is affected by this attribute.

For example:

``` series: [{

symbolOffset: … // Affect all data items. data: [23, 56]

}] // Or series: [{

data: [{
value: 23 symbolOffset: … // Only affect this data item.

}, {
value: 56 symbolOffset: … // Only affect this data item.

}]

}]

```

symbolRotate Float(None)#

The degree of the rotation of a graphic element.

Notice, symbolRotate will not affect the position of the graphic element, but just rotating by its center.

This attribute can be set at the [root level of a series](#series-pictorialBar.symbolRotate), where all data items in the series will be affected by this attribute. And this attribute can also be set at [each data item](#series-pictorialBar.data.symbolRotate) in <series-pictorialBar.data>, where only the data item is affected by this attribute.

For example:

``` series: [{

symbolRotate: … // Affect all data items. data: [23, 56]

}] // Or series: [{

data: [{
value: 23 symbolRotate: … // Only affect this data item.

}, {
value: 56 symbolRotate: … // Only affect this data item.

}]

}]

```

symbolRepeat Union(None)#

Whether to repeat a graphic element. Optional values:

false/null/undefined: Do not repeat, that is, each graphic element represents a data item.
true: Repeat, that is, a group of repeated graphic elements represent a data item. The repeat times is calculated according to [data](#series-pictorialBar.data).
a number: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is always the given number.
‘fixed’: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is calcuated according to [symbolBoundingData](#series-pictorialBar.symbolBoundingData), that is, the repeat times has nothing to do with [data](#series-pictorialBar.data). The setting is useful when graphic elements are used as background.

For example:

This attribute can be set at the [root level of a series](#series-pictorialBar.symbolRepeat), where all data items in the series will be affected by this attribute. And this attribute can also be set at [each data item](#series-pictorialBar.data.symbolRepeat) in <series-pictorialBar.data>, where only the data item is affected by this attribute.

For example:

``` series: [{

symbolRepeat: … // Affect all data items. data: [23, 56]

}] // Or series: [{

data: [{
value: 23 symbolRepeat: … // Only affect this data item.

}, {
value: 56 symbolRepeat: … // Only affect this data item.

}]

}]

```

symbolRepeatDirection Unicode(None)#

When [symbolRepeat](#series-pictorialBar.symbolRepeat) is used, symbolRepeatDirection specifies the render order of the repeated graphic elements. The setting is useful in these cases below:

If [symbolMargin](#series-pictorialBar.symbolMargin) is set as a negative value, repeated elements will overlap with each other. symbolRepeatDirection can be used to specify the order of overlap.
If [animationDelay](#series-pictorialBar.animationDelay) or [animationDelayUpdate](#series-pictorialBar.animationDelayUpdate) is used, symbolRepeatDirection specifies the order of index.

Optional values can be ‘start’ and ‘end’.

For example:

This attribute can be set at the [root level of a series](#series-pictorialBar.symbolRepeatDirection), where all data items in the series will be affected by this attribute. And this attribute can also be set at [each data item](#series-pictorialBar.data.symbolRepeatDirection) in <series-pictorialBar.data>, where only the data item is affected by this attribute.

For example:

``` series: [{

symbolRepeatDirection: … // Affect all data items. data: [23, 56]

}] // Or series: [{

data: [{
value: 23 symbolRepeatDirection: … // Only affect this data item.

}, {
value: 56 symbolRepeatDirection: … // Only affect this data item.

}]

}]

```

symbolMargin Union(None)#

Specify margin of both sides of a graphic element. (“both sides” means the two sides in the direction of its value axis). It works only when [symbolRepeat](#series-pictorialBar.symbolRepeat) is used.

Absolute value can be used (like 20), or percent value can be used (like ‘-30%’), which is based on its [symbolSize](#series-pictorialBar.symbolSize).

symbolMargin can be positive value or negative value, which enables overlap of graphic elements when [symbolRepeat](#series-pictorialBar.symbolRepeat) is used.

A “!” can be appended on the end of the value, like “30%!” or 25!, which means a extra blank will be added on the both ends, otherwise the graphic elements on both ends will reach the boundary by default.

Notice:

When [symbolRepeat](#series-pictorialBar.symbolRepeat) is true/’fixed’: The given symbolMargin is just a reference value. The final gap of graphic elements will be calculated according to [symbolRepeat](#series-pictorialBar.symbolRepeat), symbolMargin and [symbolBoundingData](#series-pictorialBar.symbolBoundingData).
When [symbolRepeat](#series-pictorialBar.symbolRepeat) is set as a number: symbolMargin does not work any more.

For example:

This attribute can be set at the [root level of a series](#series-pictorialBar.symbolMargin), where all data items in the series will be affected by this attribute. And this attribute can also be set at [each data item](#series-pictorialBar.data.symbolMargin) in <series-pictorialBar.data>, where only the data item is affected by this attribute.

For example:

``` series: [{

symbolMargin: … // Affect all data items. data: [23, 56]

}] // Or series: [{

data: [{
value: 23 symbolMargin: … // Only affect this data item.

}, {
value: 56 symbolMargin: … // Only affect this data item.

}]

}]

```

symbolClip Bool(None)#

Whether to clip graphic elements.

false/null/undefined: The whole graphic elements represent the size of value.
true: The clipped graphic elements reperent the size of value.

symbolClip is usually used in this case: both “amount value” and “current value” should be displayed. In this case, tow series can be used. One for background, using complete graphic elements, while another for current value, using clipped graphic elements.

For example:

Notice, in the example above,

The same [symbolBoundingData](#series.pictorialBar.symbolBoundingData) is used in “background series” and “current value seires”, which makes their graphic elements are the same size.
A bigger [z](#series.pictorialBar.z) is set on “current value series”, which makes it is over “background series”.

This attribute can be set at the [root level of a series](#series-pictorialBar.symbolClip), where all data items in the series will be affected by this attribute. And this attribute can also be set at [each data item](#series-pictorialBar.data.symbolClip) in <series-pictorialBar.data>, where only the data item is affected by this attribute.

For example:

``` series: [{

symbolClip: … // Affect all data items. data: [23, 56]

}] // Or series: [{

data: [{
value: 23 symbolClip: … // Only affect this data item.

}, {
value: 56 symbolClip: … // Only affect this data item.

}]

}]

```

symbolBoundingData Float(None)#

Defines a bounding area available for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if symbolBoundingData is set, the final size (or layout) of the graphic elements depend on the symbolBoundingData.

When reference bar is horizontal, symbolBoundingData is corresponding to x axis, while reference bar is vertical, symbolBoundingData is corresponding to y axis.

Rule:

If [symbolRepeat](#series-pictorialBar.symbolRepeat) is not used:

symbolBoundingData is the same as the size of reference bar by default. The size of the graphic element is determined by symbolBoundingData. For example, if reference bar is vertical, its data is 24, symbolSize is set as [30, ‘50%’], symbolBoundingData is set as 124, the final size of the graphic element will be 124 * 50% = 62. If symbolBoundingData is not set, the final size will be 24 * 50% = 12.
If [symbolRepeat](#series-pictorialBar.symbolRepeat) is used:

symbolBoundingData is the extreme value of the coordinate system. symbolBoundingData defines a bounding area, where repeated graphic elements layout according to [symbolMargin](#series-pictorialBar.symbolMargin) and [symbolRepeat](#series-pictorialBar.symbolRepeat) and [symbolSize](#series-pictorialBar.symbolSize). Both these settings determine the gap size of the repeated graphic elements.

symbolBoundingData is usually used in these cases:

When [symbolCilp](#series-pictorialBar.symbolClip) is used:

And a series is used to display “amont value”, while another series is used to display “current value”. symbolBoundingData can be used to ensure that the graphic elements of these two series are at the same size.

For example:

When [symbolRepeat](#series-pictorialBar.symbolRepeat) is used:

symbolBoundingData can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set symbolBoundingData, whose default value is a stable value (extreme value of the coordinate system).

For example:

symbolBoundingData can also be an array, such as [-40, 60], which specifies both negative and positive symbolBoundingData.

Check this example:

This attribute can be set at the [root level of a series](#series-pictorialBar.symbolBoundingData), where all data items in the series will be affected by this attribute. And this attribute can also be set at [each data item](#series-pictorialBar.data.symbolBoundingData) in <series-pictorialBar.data>, where only the data item is affected by this attribute.

For example:

``` series: [{

symbolBoundingData: … // Affect all data items. data: [23, 56]

}] // Or series: [{

data: [{
value: 23 symbolBoundingData: … // Only affect this data item.

}, {
value: 56 symbolBoundingData: … // Only affect this data item.

}]

}]

```

symbolPatternSize Float(None)#

Image can be used as the pattern of graphic elements.

``` var textureImg = new Image(); textureImg.src = ‘data:image/jpeg;base64,…’; // dataURI // Or // textureImg.src = ‘http://example.website/xx.png’; // URL … itemStyle: {

color: {
image: textureImg, repeat: ‘repeat’

}

}

```

symbolPatternSize specifies the size of pattern image. For example, if symbolPatternSize is 400, the pattern image will be displayed at the size of 400px * 400px.

For example:

This attribute can be set at the [root level of a series](#series-pictorialBar.symbolPatternSize), where all data items in the series will be affected by this attribute. And this attribute can also be set at [each data item](#series-pictorialBar.data.symbolPatternSize) in <series-pictorialBar.data>, where only the data item is affected by this attribute.

For example:

``` series: [{

symbolPatternSize: … // Affect all data items. data: [23, 56]

}] // Or series: [{

data: [{
value: 23 symbolPatternSize: … // Only affect this data item.

}, {
value: 56 symbolPatternSize: … // Only affect this data item.

}]

}]

```

animation Bool(None)#: Whether to enable animation.

animationThreshold Float(None)#: Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.

animationDuration Union(None)#

Duration of the first animation, which supports callback function for different data to have different animation effect:

``` animationDuration: function (idx) {

// delay for later data is larger return idx * 100;

}

```

animationEasing Unicode(None)#: Easing method used for the first animation. Varied easing effects can be found at [easing effect example](https://echarts.apache.org/examples/en/editor.html?c=line-easing).

animationDurationUpdate Union(None)#

Time for animation to complete, which supports callback function for different data to have different animation effect:

``` animationDurationUpdate: function (idx) {

// delay for later data is larger return idx * 100;

}

```

animationEasingUpdate Unicode(None)#: Easing method used for animation.

animationDelay Union(None)#

Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.

For example:

``` animationDelay: function (dataIndex, params) {

return params.index * 30;

} // Or inverse: animationDelay: function (dataIndex, params) {

return (params.count - 1 - params.index) * 30;

}

```

For example:

animationDelayUpdate Union(None)#

Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.

For example:

``` animationDelay: function (dataIndex, params) {

return params.index * 30;

} // Or inverse: animationDelay: function (dataIndex, params) {

return (params.count - 1 - params.index) * 30;

}

```

For example:

dimensions Any(None)#

dimensions can be used to define dimension info for series.data or dataset.source.

Notice: if [dataset](#dataset) is used, we can definite dimensions in [dataset.dimensions](#dataset.dimensions), or provide dimension names in the first column/row of [dataset.source](#dataset.source), and not need to specify dimensions here. But if dimensions is specified here, it will be used despite the dimension definitions in dataset.

For example:

``` option = {

dataset: {

source: [
// ‘date’, ‘open’, ‘close’, ‘highest’, ‘lowest’ [12, 44, 55, 66, 2], [23, 6, 16, 23, 1], …

]

}, series: {

type: ‘xxx’, // Specify name for each dimensions, which will be displayed in tooltip. dimensions: [‘date’, ‘open’, ‘close’, ‘highest’, ‘lowest’]

}

}

```#

series: {

type: ‘xxx’, dimensions: [

null, // If you do not intent to defined this dimension, use null is fine. {type: ‘ordinal’}, // Specify type of this dimension.

// ‘ordinal’ is always used in string. // If type is not specified, echarts will guess type by data.

{name: ‘good’, type: ‘number’}, ‘bad’ // Equals to {name: ‘bad’}.

]

}

```

Each data item of dimensions can be:

string, for example, ‘someName’, which equals to {name: ‘someName’}.
Object, where the attributes can be: + name: string. + type: string, supports:
- number
- float, that is, [Float64Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array)
- int, that is, [Int32Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array)
- ordinal, discrete value, which represents string generally.
- time, time value, see [data](#series.data) to check the format of time value.
- displayName: string, generally used in tooltip for dimension display. If not specified, use name by default.

When dimensions is specified, the default tooltip will be displayed vertically, which is better to show dimension names. Otherwise, tooltip will displayed only value horizontally.

encode Dict()#

Define what is encoded to for each dimension of data. For example:

``` option = {

dataset: {

source: [
// Each column is called a dimension. // There are five dimensions: 0, 1, 2, 3, 4. [12, 44, 55, 66, 2], [23, 6, 16, 23, 1], …

]

}, series: {

type: ‘xxx’, encode: {

x: [3, 1, 5], // Dimension 3, 1, 5 is mapped to x axis. y: 2, // Dimension 2 is mapped to y axis. tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.

}

}

}

```

When [dimensions](#series.dimensions) is used to defined name for a certain dimension, encode can refer the name directly. For example:

``` series: {

type: ‘xxx’, dimensions: [‘date’, ‘open’, ‘close’, ‘highest’, ‘lowest’], encode: {

x: ‘date’, y: [‘open’, ‘close’, ‘highest’, ‘lowest’]

}

}

```

The basic structure of [encode](option.html#series.encode) is illustrated as follows, where the left part of colon is the name of axis like ‘x’, ‘y’, ‘radius’, ‘angle’ or some special reserved names like “tooltip”, “itemName” etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.

The properties available in encode listed as follows:

``` // In any of the series and coordinate systems, // these properties are available: encode: {

// Display dimension “product” and “score” in the tooltip. tooltip: [‘product’, ‘score’] // Set the series name as the concat of the names of dimensions[1] and dimensions[3]. // (sometimes the dimension names are too long to type in series.name manually). seriesName: [1, 3], // Using dimensions[2] as the id of each data item. This is useful when dynamically // update data by chart.setOption(), where the new and old data item can be // corresponded by id, by which the appropriate animation can be performed when updating. itemId: 2, // Using dimensions[3] as the name of each data item. This is useful in charts like // ‘pie’, ‘funnel’, where data item name can be displayed in legend. itemName: 3, // Using dimensions[4] as the group ID for each data item. With universalTransition enabled, // the data items from the old option and those from the new one, if sharing a same group ID, // will then be matched and applied to a proper animation after setOption is called. itemGroupId: 4, // Using dimension[5] as the child group ID for each data item. This option is introduced to // make multiple levels drilldown and aggregation animation come true. See childGroupId for more. // Since v5.5.0 itemChildGroupId: 5

}

// These properties only work in cartesian(grid) coordinate system: encode: {

// Map dimensions[1], dimensions[5] and dimension “score” to the X axis. x: [1, 5, ‘score’], // Map dimensions[0] to the Y axis. y: 0

}

// These properties only work in polar coordinate system: encode: {

radius: 3, angle: 2, …

}

// These properties only work in geo coordinate system: encode: {

lng: 3, lat: 2

}

// For some type of series that are not in any coordinate system, // like ‘pie’, ‘funnel’ etc.: encode: {

value: 3

}

```

This is an [example](https://echarts.apache.org/examples/en/view.html?c=dataset-encode1&edit=1&reset=1) for encode.

Specially, in [custom series(~series-custom), some property in encode, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the [dataZoom](#dataZoom) on the axis will not filter the series.

``` var option = {

xAxis: {}, yAxis: {}, dataZoom: [{

xAxisIndex: 0

}, {
yAxisIndex: 0

}], series: {

type: ‘custom’, renderItem: function (params, api) {

return {
type: ‘circle’, shape: {

cx: 100, // x position is always 100 cy: api.coord([0, api.value(0)])[1], r: 30

}, style: {

fill: ‘blue’

}

};

}, encode: {

// Then the series will not be controlled // by x axis and corresponding dataZoom. x: -1, y: 1

}, data: [ … ]

}

};

```

dataGroupId Unicode(None)#

A group ID assigned to all data items in the series.

This option has a lower priority than groupId, which means when groupId is specified for a certain data item the dataGroupId will be simply ignored for that data item. For more information, please see series.data.groupId.

data Any(None)#

Data array of series, which can be in the following forms:

Notice, if no data specified in series, and there is [dataset](#dataset) in option, series will use the first [dataset](#dataset) as its datasource. If data has been specified, [dataset](#dataset) will not used.

series.datasetIndex can be used to specify other [dataset](#dataset).

Basically, data is represented by a two-dimension array, like the example below, where each column is named as a “dimension”.

``` series: [{

data: [
// dimX dimY other dimensions … [ 3.4, 4.5, 15, 43], [ 4.2, 2.3, 20, 91], [ 10.8, 9.5, 30, 18], [ 7.2, 8.8, 18, 57]

]

}]

```

In [cartesian (grid)](#grid), “dimX” and “dimY” correspond to [xAxis](#xAxis) and [yAxis](#yAxis) respectively.
In [polar](#polar) “dimX” and “dimY” correspond to [radiusAxis](#radiusAxis) and [angleAxis](#angleAxis) respectively.
Other dimensions are optional, which can be used in other places. For example: + [visualMap](#visualMap) can map one or more dimensions to visual (color, symbol size …). + [series.symbolSize](#series.symbolSize) can be set as a callback function, where symbol size can be calculated by values of a certain dimension. + Values in other dimensions can be shown by [tooltip.formatter](#tooltip.formatter) or [series.label.formatter](#series.label.formatter).

Especially, when there is one and only one category axis (axis.type is ‘category’), data can be simply be represented by a one-dimension array, like:

``` xAxis: {

data: [‘a’, ‘b’, ‘m’, ‘n’]

}, series: [{

// Each item corresponds to each item in xAxis.data. data: [23, 44, 55, 19] // In fact, it is the simplification of the format below: // data: [[0, 23], [1, 44], [2, 55], [3, 19]]

}]

```

Relationship between “value” and [axis.type](#xAxis.type)

When a dimension corresponds to a value axis (axis.type is ‘value’ or ‘log’):

The value can be a number (like 12) (can also be a number in a string format, like ‘12’).
When a dimension corresponds to a category axis (axis.type is ‘category’):

The value should be the ordinal of the axis.data (based on 0), the string value of the axis.data. For example:

```

xAxis: {
type: ‘category’, data: [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’]

}, yAxis: {

type: ‘category’, data: [‘a’, ‘b’, ‘m’, ‘n’, ‘p’, ‘q’]

}, series: [{

data: [
// xAxis yAxis [ 0, 0, 2 ], // This point is located at xAxis: ‘Monday’, yAxis: ‘a’. [ ‘Thursday’, 2, 1 ], // This point is located at xAxis: ‘Thursday’, yAxis: ‘m’. [ 2, ‘p’, 2 ], // This point is located at xAxis: ‘Wednesday’, yAxis: ‘p’. [ 3, 3, 5 ]

]

}]

```

There is an example of double category axes: [Github Punchcard](https://echarts.apache.org/examples/en/editor.html?c=scatter-punchCard).
When a dimension corresponds to a time axis (type is ‘time’), the value can be:
- a timestamp, like 1484141700832, which represents a UTC time.
- a date string, in one of the formats below: - a subset of [ISO 8601](https://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15), only including (all of these are treated as local time unless timezone is specified, which is consistent with [moment](https://momentjs.com/)):
  - only part of year/month/date/time are specified: ‘2012-03’, ‘2012-03-01’, ‘2012-03-01 05’, ‘2012-03-01 05:06’.
  - separated by “T” or a space: ‘2012-03-01T12:22:33.123’, ‘2012-03-01 12:22:33.123’.
  - timezone specified: ‘2012-03-01T12:22:33Z’, ‘2012-03-01T12:22:33+8000’, ‘2012-03-01T12:22:33-05:00’.
  - other date string format (all of these are treated as local time): ‘2012’, ‘2012-3-1’, ‘2012/3/1’, ‘2012/03/01’, ‘2009/6/12 2:00’, ‘2009/6/12 2:05:08’, ‘2009/6/12 2:05:08.123’.
- a JavaScript Date instance created by user: - Caution, when using a data string to create a Date instance, [browser differences and inconsistencies](https://dygraphs.com/date-formats.html) should be considered. - For example: In chrome, new Date(‘2012-01-01’) is treated as a Jan 1st 2012 in UTC, while new Date(‘2012-1-1’) and new Date(‘2012/01/01’) are treated as Jan 1st 2012 in local timezone. In safari new Date(‘2012-1-1’) is not supported. - So if you intent to perform new Date(dateString), it is strongly recommended to use a time parse library (e.g., [moment](https://momentjs.com/)), or use echarts.time.parse, or check [this](https://dygraphs.com/date-formats.html).

Customize a data item:

When needing to customize a data item, it can be set as an object, where property value represent real value. For example:

``` [

12, 24, {

value: [24, 32], // label style, only works in this data item. label: {}, // item style, only works in this data item. itemStyle:{}

}, 33

] // Or [

[12, 332], [24, 32], {

value: [24, 32], // label style, only works in this data item. label: {}, // item style, only works in this data item. itemStyle:{}

}, [33, 31]

]

```

Empty value:

‘-’ or null or undefined or NaN can be used to describe that a data item does not exist (ps：not exist does not means its value is 0).

For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.

markPoint Dict()#: Mark point in a chart.

markLine Dict()#: Use a line in the chart to illustrate.

markArea Dict()#: Used to mark an area in chart. For example, mark a time interval.

clip Bool(None)#

> Since v4.4.0

If clip the overflow on the coordinate system. Clip results varies between series:

Scatter/EffectScatter：Ignore the symbols exceeds the coordinate system. Not clip the elements.
Bar：Clip all the overflowed. With bar width kept.
Line：Clip the overflowed line.
Lines: Clip all the overflowed.
Candlestick: Ignore the elements exceeds the coordinate system.
PictorialBar: Clip all the overflowed. (Supported since v5.5.0)
Custom: Clip all the olverflowed.

All these series have default value true except pictorialBar and custom series. Set it to false if you don’t want to clip.

zlevel Float(None)#

zlevel value of all graphical elements in Pictorial bar chart .

zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.

Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.

z Float(None)#

z value of all graphical elements in Pictorial bar chart , which controls order of drawing graphical components. Components with smaller z values may be overwritten by those with larger z values.

z has a lower priority to zlevel, and will not create new Canvas.

silent Bool(None)#: Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.

universalTransition Any(None)#

> Since v5.2.0

Configuration related to universal transition animation.

Universal Transition provides the ability to morph between any series. With this feature enabled, each time setOption, transitions between series with the same id will be automatically associated with each other.

One-to-many or many-to-one animations such as drill-down, aggregation, etc. can also be achieved by specifying data items’ groupId and childGroupId.

This can be enabled directly by configuring universalTransition: true in the series. It is also possible to provide an object for more detailed configuration.

tooltip Dict()#: tooltip settings in this series.

ipecharts.option.seriesitems.pictorialbar module#

```#

This Page