{{ target: series-pictorialBar }}

series.pictoialBar(Object)

pictorial bar chart

Pictorial bar chart is a type of bar chart that customized glyph (like images, SVG 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 with at least 1 category axis.

Example: ~800x400

Layout

Basically pictoialBar 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、symbolOffset.

See the example below: ~800x600

symbolSize is used to specify the size of graphic elements.

See the example below: ~800x600

Graphic types

symbolRepeat can be

Graphic elements can be set as ‘repeat’ or not by 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: ~800x400

Each graphic element can be basic shape (like 'circle', 'rect', ...), or SVG PathData, or image. See symbolType.

See the example below: ~800x400

symbolClip can be used to clip graphic elements.

See the example below: ~800x600

type(string) = ‘pictorialBar’

{{ use: partial-component-id( prefix = “#” ) }}

{{ use: partial-series-name() }}

{{ use: partial-legend-hover-link() }}

{{ use: partial-coord-sys( seriesType = “pictorialBar”, coordSysDefault = “‘cartesian2d’”, cartesian2d = true, polar = false, geo = false ) }}

{{ use: partial-cursor() }}

label(Object)

{{ use: partial-label-desc() }}

{{ use: partial-label( prefix = “##”, defaultPosition = “‘inside’”, formatter = true ) }}

labelLine(Object)

{{ use: partial-label-line-desc() }}

{{ use: partial-label-line( prefix = ‘##’, length2 = true, minTurnAngle = true, showAbove = true, smooth = true ) }}

labelLayout(Object|Function)

{{ use: partial-label-layout( prefix = “##” ) }}

itemStyle(Object)

{{ use: partial-item-style-desc() }}

{{ use: partial-item-style( prefix = “##”, useColorPalatte = true, hasCallback = false, useDecal = true ) }}

emphasis(Object)

Configurations of emphasis state.

{{ use: partial-focus-blur-scope() }}

{{ use: pictoialBar-state( prefix = “##” ) }}

blur(Object)

{{ use: partial-version( version = “5.0.0” ) }}

Configurations of blur state. Available when emphasis.focus is set.

{{ use: pictoialBar-state( prefix = “##” ) }}

select(Object)

{{ use: partial-version( version = “5.0.0” ) }}

Configurations of select state. Available when selectedMode is set.

{{ use: partial-selected-mode( version = ‘5.0.0’ ) }}

{{ use: pictoialBar-state( prefix = “##” ) }}

{{ use: partial-barGrid( seriesType = ‘pictorialBar’, barGapDefault = “-100%” ) }}

{{ use: pictorialBar-symbol-attrs( prefix = “#” ) }}

{{ use: partial-series-dimensions( prefix = “#” ) }}

{{ use: partial-series-encode( prefix = “#” ) }}

data(Array)

{{ use: partial-2d-data-desc() }}

name(string)

The name of data item.

value(number)

The value of a single data item.

{{ use: pictorialBar-symbol-attrs( prefix = “##”, useZ2 = true ) }}

label(Object)

The style setting of the text label in a single bar.

{{ use: partial-label( prefix = “###”, defaultPosition = “inside” ) }}

labelLine(Object)

{{ use: partial-label-line-desc() }}

{{ use: partial-label-line( prefix = ‘###’, length2 = true, minTurnAngle = true, showAbove = true, smooth = true ) }}

itemStyle(Object)

{{ use: partial-item-style( prefix = “###”, useDecal = true ) }}

emphasis(Object)

Emphasis state of the specified single data.

{{ use: partial-bar-state( prefix = “###” ) }}

blur(Object)

{{ use: partial-version( version = “5.0.0” ) }}

Blur state of the specified single data.

{{ use: partial-bar-state( prefix = “###” ) }}

select(Object)

{{ use: partial-version( version = “5.0.0” ) }}

Select state of the specified single data.

{{ use: partial-bar-state( prefix = “###” ) }}

{{ use: partial-tooltip-in-series-data() }}

{{ use: partial-marker( prefix = “#”, seriesType = “pictorialBar”, hasCoord = true, hasType = true ) }}

{{ use: partial-z-zlevel( prefix = “#”, componentName = "Pictorial bar chart " ) }}

{{ use: partial-silent( prefix = “#” ) }}

{{ use: partial-animation( prefix = “#”, noAnimationDelay = true ) }}

{{ use: pictorialBar-animation-delay( prefix = “##” ) }}

{{ use: partial-tooltip-in-series() }}

{{ target: pictorialBar-symbol-attrs }}

#${prefix} symbol(string) = ‘circle’

Specify the type of graphic elements.

{{ use: partial-icon() }}

Example: ~800x400

{{ use: pictorialBar-symbol-attrs-cascade( attrName = ‘symbol’ ) }}

#${prefix} symbolSize(number|Array) = [‘100%’, ‘100%’]

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.

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

  • width: <width of reference bar> * 30%.
  • height:

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

For example: ~800x600

{{ use: pictorialBar-symbol-attrs-cascade( attrName = ‘symbolSize’ ) }}

#${prefix} symbolPosition(string) = ‘start’

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: ~800x600

{{ use: pictorialBar-symbol-attrs-cascade( attrName = ‘symbolPosition’ ) }}

#${prefix} symbolOffset(Array) = [0, 0]

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.

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

For example: ~800x600

{{ use: pictorialBar-symbol-attrs-cascade( attrName = ‘symbolOffset’ ) }}

#${prefix} symbolRotate(number)

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.

{{ use: pictorialBar-symbol-attrs-cascade( attrName = ‘symbolRotate’ ) }}

#${prefix} symbolRepeat(boolean|number|string)

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.
  • 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, that is, the repeat times has nothing to do with data. The setting is useful when graphic elements are used as background.

For example: ~800x400

{{ use: pictorialBar-symbol-attrs-cascade( attrName = ‘symbolRepeat’ ) }}

#${prefix} symbolRepeatDirection(string) = ‘start’

When symbolRepeat is used, symbolRepeatDirection specifies the render order of the repeated graphic elements. The setting is useful in these cases below:

  • If 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 or animationDelayUpdate is used, symbolRepeatDirection specifies the order of index.

Optional values can be 'start' and 'end'.

For example: ~800x400

{{ use: pictorialBar-symbol-attrs-cascade( attrName = ‘symbolRepeatDirection’ ) }}

#${prefix} symbolMargin(number|string)

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 is used.

Absolute value can be used (like 20), or percent value can be used (like '-30%'), which is based on its symbolSize.

symbolMargin can be positive value or negative value, which enables overlap of graphic elements when 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 is true/'fixed': The given symbolMargin is just a reference value. The final gap of graphic elements will be calculated according to symbolRepeat, symbolMargin and symbolBoundingData.
  • When symbolRepeat is set as a number: symbolMargin does not work any more.

For example: ~800x600

{{ use: pictorialBar-symbol-attrs-cascade( attrName = ‘symbolMargin’ ) }}

#${prefix} symbolClip(boolean) = false

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: ~800x600

Notice, in the example above,

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

{{ use: pictorialBar-symbol-attrs-cascade( attrName = ‘symbolClip’ ) }}

#${prefix} symbolBoundingData(number)

Defines a bounding area availble 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 coresponding to x axis, while reference bar is vertical, symbolBoundingData is coresponding to y axis.

Rule:

  • If symbolRepeat is not used:

    symbolBoundingData is the same as the size of reference bar by default. The size of the graphic element is detemined 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 is used:

    symbolBoundingData is the extreme value of the coordinate system. symbolBoundingData defines a bounding area, where repeated graphic elements layout according to symbolMargin and symbolRepeat and symbolSize. Both these settings determine the gap size of the repeated graphic elements.

symbolBoundingData is usually used in these cases:

  • When symbolCilp 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: ~800x600

  • When 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: ~800x600

Check this example: ~800x400

{{ use: pictorialBar-symbol-attrs-cascade( attrName = ‘symbolBoundingData’ ) }}

#${prefix} symbolPatternSize(number) = 400

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://xxx.xxx.xxx/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: ~800x400

{{ use: pictorialBar-symbol-attrs-cascade( attrName = ‘symbolPatternSize’ ) }}

{{ if: ${useZ2} }} #${prefix} z(number)

Specify the relationship of overlap between graphic elements. A bigger value means higher. {{ /if }}

#${prefix} hoverAnimation(boolean) = false

Whether to enable hover animation.

{{ use: pictorialBar-symbol-attrs-cascade( attrName = ‘hoverAnimation’ ) }}

{{ use: partial-animation( prefix = “##”, noAnimationDelay = true ) }}

{{ use: pictorialBar-animation-delay( prefix = “##” ) }}

{{ target: pictorialBar-animation-delay }}

#${prefix} animationDelay(number|Function) = 0

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: ~800x400

#${prefix} animationDelayUpdate(number|Function) = 0

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: ~800x400

{{ target: pictorialBar-symbol-attrs-cascade }}

This attribute can be set at the root level of a series, where all data items in the series will be affected by this attribute. And this attribute can also be set at each data item in series-pictorialBar.data, where only the data item is affected by this attribute.

For example:

series: [{
    ${attrName}: ... // Affect all data items.
    data: [23, 56]
}]
// Or
series: [{
    data: [{
        value: 23
        ${attrName}: ... // Only affect this data item.
    }, {
        value: 56
        ${attrName}: ... // Only affect this data item.
    }]
}]

{{ target: pictoialBar-state }}

#${prefix} label(Object)

{{ use: partial-label( prefix = “#” + ${prefix}, formatter = ${prefix} === ‘##’ ) }}

#${prefix} labelLine(Object)

{{ use: partial-label-line-desc() }}

{{ use: partial-label-line( prefix = “#” + ${prefix} ) }}

#${prefix} itemStyle(Object)

{{ use: partial-item-style( prefix = “#” + ${prefix} ) }}