{{ target: series-bar }}
bar chart
Bar chart shows different data through the height of a bar, which is used in rectangular coordinate with at least 1 category axis.
{{ use: partial-component-id( prefix = “#” ) }}
{{ use: partial-series-name() }}
{{ use: partial-legend-hover-link() }}
{{ use: partial-coord-sys( seriesType = “bar”, coordSysDefault = “‘cartesian2d’”, cartesian2d = true, polar = true, geo = false ) }}
{{ use: partial-version( version = “4.5.0” ) }}
Whether to add round caps at the end of the bar sectors. Valid only for bar series on polar coordinates.
{{ use: partial-version( version = “4.7.0” ) }}
Whether to show background behind each bar. Use backgroundStyle to set background style.
{{ use: partial-version( version = “4.7.0” ) }}
Background style of each bar if showBackground is set to be true
.
{{ use: partial-bar-item-style( prefix = “##”, useColorPalatte = false, hasCallback = true, defaultColor = “‘rgba(180, 180, 180, 0.2)’” ) }}
{{ use: partial-bar-state( prefix = “#”, topLevel = true, isNormal = true ) }}
{{ use: partial-label-layout( prefix = “##” ) }}
Configurations of emphasis state.
{{ use: partial-focus-blur-scope() }}
{{ use: partial-bar-state( prefix = “##”, topLevel = true, isNormal = false ) }}
Configurations of blur state. Available when emphasis.focus is set.
{{ use: partial-bar-state( prefix = “##”, topLevel = true, isNormal = false ) }}
Configurations of select state. Available when selectedMode is set.
{{ use: partial-bar-state( prefix = “##”, topLevel = true, isNormal = false ) }}
{{ use: partial-selected-mode( version = ‘5.0.0’ ) }}
Name of stack. On the same category axis, the series with the same stack
name would be put on top of each other.
The dowmsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.
Options:
'lttb'
Use Largest-Triangle-Three-Bucket algorithm to filter points. It will keep the trends and extremas.'average'
Use average value of filter points'max'
Use maximum value of filter points'min'
Use minimum value of filter points'sum'
Use sum of filter points{{ use: partial-cursor() }}
{{ use: partial-barGrid( seriesType = ‘bar’ ) }}
{{ use: partial-large( prefix = “#”, defaultLargeThreshold = 400 ) }}
{{ use: partial-progressive( prefix = ‘#’, supportProgressiveChunkMode = true, defaultProgressive = 5000, defaultProgressiveChunkMode = ‘mod’ ) }}
{{ use: partial-series-dimensions( prefix = “#” ) }}
{{ use: partial-series-encode( prefix = “#” ) }}
{{ use: partial-seriesLayoutBy() }}
{{ use: partial-datasetIndex() }}
{{ use: partial-series-group-id() }}
{{ use: partial-2d-data-desc() }}
The name of data item.
The value of a single data item.
{{ use: partial-data-group-id( prefix = ‘##’ ) }}
{{ use: partial-bar-state( prefix = “##”, topLevel = false, isNormal = true ) }}
Emphasis state of single data.
{{ use: partial-bar-state( prefix = “###”, topLevel = false, isNormal = false ) }}
{{ use: partial-version( version = “5.0.0” ) }}
Blur state of single data.
{{ use: partial-bar-state( prefix = “###”, topLevel = false, isNormal = false ) }}
{{ use: partial-version( version = “5.0.0” ) }}
Select state of single data.
{{ use: partial-bar-state( prefix = “###”, topLevel = false, isNormal = false ) }}
{{ use: partial-clip( prefix = “#” ) }}
{{ use: partial-z-zlevel( prefix = “#”, componentName = "Bar chart " ) }}
{{ use: partial-silent( prefix = “#” ) }}
{{ use: partial-animation( prefix = “#” ) }}
{{ use: partial-universal-transition( prefix = “#” ) }}
{{ use: partial-tooltip-in-series() }}
{{ target: partial-bar-state }}
#${prefix} label(Object)
{{ if: ${topLevel} }} {{ use: partial-label-desc() }} {{ else }} Label style configurations of single data. {{ /if }}
{{ use: partial-label( prefix = “#” + ${prefix}, defaultPosition = “‘inside’”, noPosition = true, formatter = ${topLevel} ) }}
##${prefix} position(string|Array) = ‘inside’
**Followings are the options: **
[x, y]
Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. For example:
// Absolute pixel values position: [10, 10], // Relative percentage position: ['50%', '50%']
‘top’
‘left’
‘right’
‘bottom’
‘inside’
‘insideLeft’
‘insideRight’
‘insideTop’
‘insideBottom’
‘insideTopLeft’
‘insideBottomLeft’
‘insideTopRight’
‘insideBottomRight’
See: label position.
start
/ insideStart
/ middle
/ insideEnd
/ end
.{{ if: ${topLevel && isNormal} }} ##${prefix} valueAnimation(boolean)
Whether to enable text animation of value change.
See this example. {{ /if }}
#${prefix} labelLine(Object)
{{ use: partial-label-line-desc() }}
{{ use: partial-label-line( prefix = ‘#’ + ${prefix}, length2 = ${isNormal}, minTurnAngle = ${isNormal}, showAbove = ${isNormal}, smooth = ${isNormal} ) }}
#${prefix} itemStyle(Object)
{{ if: ${topLevel} }} {{ use: partial-item-style-desc() }} {{ else }} Rectangle style configurations of single data. {{ /if }}
{{ use: partial-bar-item-style( prefix = “#” + ${prefix}, useColorPalatte = ${topLevel && isNormal}, useDecal = ${isNormal}, hasCallback = ${topLevel && isNormal} ) }}
{{ target: partial-bar-item-style }}
#${prefix} color(Color) = ${defaultColor|default(‘auto’)}
Bar color. {{ if: ${useColorPalatte} }} By default, colors from global palette option.color is used. {{ /if }}
#${prefix} borderColor(Color) = ‘#000’
The border color of bar.
#${prefix} borderWidth(number) = 0
The border width of bar. defaults to have no border.
#${prefix} borderType(string) = ‘solid’
Border type. Can be 'dashed'
, 'dotted'
.
{{ use: partial-border-radius( prefix = ${prefix} ) }}
{{ use: partial-style-shadow-opacity( prefix = ${prefix} ) }}
{{ if: ${useDecal} }} #${prefix} decal(Object)
{{ use: partial-decal-desc() }}
{{ use: partial-decal( prefix = ‘#’ + ${prefix} ) }} {{ /if }}