{{ target: series-line }}
broken line chart
Broken line chart relates all the data points symbol by broken lines, which is used to show the trend of data changing. It could be used in both rectangular coordinate andpolar coordinate.
Tip: When areaStyle is set, area chart will be drawn.
Tip: With visualMap component, Broken line / area chart can have different colors on different sections, as below:
{{ use: partial-component-id( prefix = “#” ) }}
{{ use: partial-series-name() }}
{{ use: partial-coord-sys( seriesType = “bar”, coordSysDefault = “‘cartesian2d’”, cartesian2d = true, polar = true, geo = false ) }}
{{ use: partial-symbol( seriesType = “line”, defaultSymbol = “‘emptyCircle’”, defaultSymbolSize = 4, prefix = “#”, hasCallback = true ) }}
Whether to show symbol. It would be shown during tooltip hover.
Only work when main axis is 'category'
axis (axis.type
is 'category'
). Optional values:
'auto'
: Default value. Show all symbols if there is enough space. Otherwise follow the interval strategy with with axisLabel.interval.true
: Show all symbols.false
: Follow the interval strategy with axisLabel.interval.{{ use: partial-legend-hover-link() }}
If stack the value. On the same category axis, the series with the same stack
name would be put on top of each other.
The effect of the below example could be seen through stack switching of toolbox on the top right corner:
{{ use: partial-cursor() }}
Whether to connect the line across null points.
{{ use: partial-clip( prefix = “#” ) }}
Whether to show as a step line. It can be true
, false
. Or 'start'
, 'middle'
, 'end'
. Which will configure the turn point of step line.
See the example using different step
options:
{{ use: partial-label-desc() }}
{{ use: partial-label( prefix = “##”, defaultPosition = “‘top’”, formatter = true ) }}
{{ use: partial-version( version = “5.0.0” ) }}
Label on the end of line.
{{ use: partial-label( prefix = “##”, formatter = true, noPosition = true ) }}
Whether to enable text animation of value change.
{{ use: partial-label-line-desc() }}
{{ use: partial-label-line( prefix = ‘##’, length2 = true, minTurnAngle = true, showAbove = true, smooth = true ) }}
{{ use: partial-label-layout( prefix = “##” ) }}
The style of the symbol point of broken line.
{{ use: partial-item-style( prefix = “##”, useColorPalatte = true, hasCallback = true, useDecal = true, decalOnlyWithAreaStyle = true ) }}
Line style.
{{ use: partial-line-style( prefix = “##”, defaultWidth = 2 ) }}
The style of area.
{{ use: partial-area-style( prefix = “##”, hasOrigin = true ) }}
Highlight style of the graphic.
Whether to scale to highlight the data in emphasis state.
{{ use: partial-focus-blur-scope() }}
{{ use: line-state() }}
{{ use: partial-version( version = “5.0.0” ) }}
{{ use: partial-label( prefix = “###”, formatter = true, noPosition = true, noDistance = true ) }}
{{ use: partial-version( version = “5.0.0” ) }}
Configurations of blur state. Available when emphasis.focus is set.
{{ use: line-state() }}
{{ use: partial-label( prefix = “###”, formatter = true, noPosition = true, noDistance = true ) }}
{{ use: partial-version( version = “5.0.0” ) }}
Configurations of select state. Available when selectedMode is set.
{{ use: line-state() }}
{{ use: partial-label( prefix = “###”, formatter = true, noPosition = true, noDistance = true ) }}
{{ use: partial-selected-mode( version = ‘5.0.0’ ) }}
Whether to show as smooth curve.
If is typed in boolean
, then it means whether to enable smoothing. If is typed in number
, valued from 0 to 1, then it means smoothness. A smaller value makes it less smooth.
Please refer to smoothMonotone to change smoothing algorithm.
Whether the broken line keep the monotonicity when it is smoothed. It can be set as 'x'
, 'y'
to keep the monotonicity on x axis or y axis.
It is usually used on dual value axis.
Here are 2 examples of broken line chart with dual value axis, showing the differences when smoothMonotone
is without any setting, and smoothMonotone
is set as 'x'
.
smoothMonotone
:'x'
: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-series-dimensions( prefix = “#” ) }}
{{ use: partial-series-encode( prefix = “#” ) }}
{{ use: partial-seriesLayoutBy() }}
{{ use: partial-datasetIndex() }}
{{ use: partial-2d-data-desc() }}
The name of data item.
The value of a single data item.
{{ use: partial-symbol( defaultSymbol = “‘circle’”, defaultSymbolSize = 4, prefix = “##”, name = “single data” ) }}
The style of the text of single data point.
{{ use: partial-label( prefix = “###”, defaultPosition = “top” ) }}
{{ use: partial-label-line-desc() }}
{{ use: partial-label-line( prefix = ‘###’, length2 = true, minTurnAngle = true, showAbove = true, smooth = true ) }}
The style of the symbol of single data point.
{{ use: partial-item-style( prefix = “###” ) }}
Emphasis state of specified single data.
{{ use: line-item-state() }}
Blur state of specified single data.
{{ use: line-item-state() }}
Select state of specified single data.
{{ use: line-item-state() }}
{{ use: partial-tooltip-in-series-data() }}
{{ use: partial-marker( prefix = “#”, seriesType = “line”, hasCoord = true, hasType = true ) }}
{{ use: partial-z-zlevel( prefix = “#”, componentName = “Line” ) }}
{{ use: partial-silent( prefix = “#” ) }}
{{ use: partial-animation( prefix = “#”, defaultAnimationEasing = ‘linear’ ) }}
{{ use: partial-tooltip-in-series() }}
{{ target: line-state }}
{{ use: partial-label( prefix = “###”, formatter = true ) }}
{{ use: partial-label-line-desc() }}
{{ use: partial-label-line( prefix = ‘###’ ) }}
{{ use: partial-item-style( prefix = “###” ) }}
{{ use: partial-line-style( prefix = “###”, defaultWidth = 2 ) }}
{{ use: partial-area-style( prefix = “###” ) }}
{{ target: line-item-state }}
{{ use: partial-label( prefix = “####” ) }}
{{ use: partial-item-style( prefix = “####” ) }}