{{target: series-boxplot}}
Boxplot is a convenient way of graphically depicting groups of numerical data through their quartiles.
Example:
{{use: partial-component-id(prefix=“#”)}}
{{use: partial-coord-sys( seriesType=“cartesian2d”, coordSysDefault=“‘cartesian2d’”, cartesian2d=true )}}
{{ use: partial-series-name }}
{{ use: partial-legend-hover-link }}
Whether to enable the animation when hovering on box.
Layout methods, whose optional values are:
'horizontal'
: horizontally layout all boxes.
'vertical'
: vertically layout all boxes.
The default value is decided by:
category
axis:'horizontal'
;'vertical'
;'horizontal'
.Up and bottom boundary of box width. The array is in the form of [min, max]
.
It could be absolute value in pixel, such as [7, 50]
, or percentage, such as ['40%', '90%']
. The percentage means the percentage to the maximum possible width.
{{use: partial-item-style( prefix=“##”, useColorPalatte=true, name=“boxplot”, defaultColor=“#fff”, defaultBorderWidth=1 )}}
{{use: partial-item-style( prefix=“###”, useColorPalatte=true, name=“boxplot”, defaultColor=“#fff”, defaultBorderWidth=2, defaultShadowBlur=5, defaultShadowOffsetX=2, defaultShadowOffsetY=2, defaultShadowColor=“rgba(0,0,0,0.4)” )}}
{{use:partial-series-dimensions( prefix=“#” )}}
{{use:partial-series-encode( prefix=“#” )}}
Data should be the two-dimensional array shown as follow.
[ [655, 850, 940, 980, 1175], [672.5, 800, 845, 885, 1012.5], [780, 840, 855, 880, 940], [621.25, 767.5, 815, 865, 1011.25], { // the data item could also be an Object, so that it could contains special settings for this data item. value: [713.75, 807.5, 810, 870, 963.75], itemStyle: {...} }, ... ]
Every data item (each line in the example above) in the two-dimensional array will be rendered into a box, and each line have five values as:
[min, Q1, median (or Q2), Q3, max]
Data Processing
ECharts doesn't contain data processing modules, so the five statistic values should be calculated by yourself and then passes into boxplot
.
However, ECharts also provide some simple raw data processing tools. For example, this example uses echarts.dataTool.prepareBoxplotData
to proceed simple data statistics.
Name of data item.
Value of data item.
[min, Q1, median (or Q2), Q3, max]
{{use: partial-item-style( prefix=“###”, useColorPalatte=true, name=“boxplot”, defaultColor=“#fff”, defaultBorderWidth=1 )}}
{{use: partial-item-style( prefix=“####”, useColorPalatte=true, name=“boxplot”, defaultColor=“#fff”, defaultBorderWidth=2, defaultShadowBlur=5, defaultShadowOffsetX=2, defaultShadowOffsetY=2, defaultShadowColor=“rgba(0,0,0,0.4)” )}}
{{use: partial-tooltip-in-series-data( galleryViewPath=${galleryViewPath} )}}
{{use: partial-marker( prefix=“#”, seriesType=“boxplot”, galleryEditorPath=${galleryEditorPath}, hasCoord=true, hasType=true )}}
{{use:partial-z-zlevel( prefix=“#”, componentName=“Box plot” ) }}
{{ use:partial-silent( prefix=“#” ) }}
{{use: partial-animation-init( prefix=“#”, defaultAnimationEasing=‘elasticOut’, defaultAnimationDuration=800, galleryEditorPath=${galleryEditorPath} )}}
{{use: partial-tooltip-in-series( galleryViewPath=${galleryViewPath} )}}