{{ target: series-pie }}

series.pie(Object)

pie chart

The pie chart is mainly used for showing proportion of different categories. Each arc length represents the proportion of data quantity.

Tip: The pie chart is more suitable for illustrating the numerical proportion. If you just to present the numerical differences of various categories, the bar graph chart is more suggested. Because compared to tiny length difference, people is less sensitive to the minor radian difference. Otherwise, it can also be shown as Nightingale chart by using the roseType to distinguish different data through radius.

Since ECharts v4.6.0, we provide 'labelLine' and 'edge' two extra layouts. Check label.alignTo for more information.

~900x250

For multiple pie series in a single chart, you may use left, right, top, bottom, width, and height to locate the pies. Percetage values like radius or label.edgeDistance are relative to the viewport defined by this setting.

** The below example shows a customized Nightingale chart: ** ~500x400

type(string) = ‘pie’

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

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

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

{{ use: partial-selected-mode() }}

selectedOffset(number) = 10

The offset distance of selected sector.

clockwise(boolean) = true

Whether the layout of sectors of pie chart is clockwise.

startAngle(number) = 90

The start angle, which range is [0, 360].

minAngle(number) = 0

The minimum angle of sector (0 ~ 360). It prevents some sector from being too small when value is small, which will affect user interaction.

minShowLabelAngle(number) = 0

If a sector is less than this angle (0 ~ 360), label and labelLine will not be displayed.

roseType(boolean|string) = false

Whether to show as Nightingale chart, which distinguishs data through radius. There are 2 optional modes:

  • 'radius' Use central angle to show the percentage of data, radius to show data size.
  • 'area' All the sectors will share the same central angle, the data size is shown only through radiuses.

avoidLabelOverlap(boolean) = true

Whether to enable the strategy to avoid labels overlap. Defaults to be enabled, which will move the label positions in the case of labels overlapping

stillShowZeroSum(boolean) = true

Whether to show sector when all data are zero.

{{ use: partial-cursor() }}

{{ use: partial-rect-layout-width-height( componentName = “pie chart”, defaultLeft = 0, defaultTop = 0, defaultRight = 0, defaultBottom = 0 ) }}

label(Object)

{{ use: partial-label-desc( name = “pie chart” ) }}

{{ use: partial-pie-label( prefix = “##”, position = true, formatter = true ) }}

alignTo(string) = ‘none’

Label aligning policy. Valid only when position is 'outer'.

Since ECharts v4.6.0, we provide 'labelLine' and 'edge' two extra valid alignTo values.

  • 'none' (default): label lines have fixed length as labelLine.length and labelLine.length2.
  • 'labelLine': aligning to the end of label lines and the length of the shortest horizontal label lines is configured by labelLine.length2.
  • 'edge': aligning to text and the distance between the edges of text and the viewport is configured by label.edgeDistance.

~900x250

edgeDistance(string|number) = ‘25%’

The horizontal distance between text edges and viewport when label.position is 'outer' and label.alignTo is 'edge'.

~900x250

In most cases, you need a small edgeDistance value like 10 for mobile devices to make sure more text can be shown instead of being .... But on larger resolutions, a percentage value should be applied so that the label lines won't be too long. If your chart is used in varied resolutions, it is advised to set responsive design for different resolutions.

bleedMargin(number) = 10

The horizontal distance between text and viewport when label.position is 'outer' and label.alignTo is 'none' or 'labelLine'. Longer text will be truncated into '...'.

~800x250

distanceToLabelLine(number) = 5

Distance between label line and text.

~800x250

labelLine(Object)

The style of visual guide line. Will show when label position is set as 'outside'.

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

maxSurfaceAngle(number)

Max angle between guide line and surface normal. To prevent guide line overlapping with sector.

Can be 0 - 180 degree.

labelLayout(Object|Function)

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

itemStyle(Object)

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

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

{{ use: partial-pie-border-radius( prefix = ‘##’ ) }}

emphasis(Object)

Configurations of emphasis state.

scale(boolean) = true

Whether to scale to highlight the data in emphasis state.

scaleSize(number) = 10

Size of scale. Available when emphasis.scale is set true.

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

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

blur(Object)

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

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

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

select(Object)

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

Configurations of select state. Available when selectedMode is set.

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

{{ use: component-circular-layout( componentName = “Pie chart”, defaultRadius = “[0, ‘75%’]” ) }}

Donut chart can be achieved by setting a inner radius.

{{ use: partial-seriesLayoutBy() }}

{{ use: partial-datasetIndex() }}

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

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

{{ use: partial-series-group-id() }}

data(Array)

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

name(string)

The name of data item.

value(number)

Data value.

{{ use: partial-data-group-id( prefix = ‘##’ ) }}

selected(boolean) = false

Whether the data item is selected.

label(Object)

The label configuration of a single sector.

{{ use: partial-pie-label( prefix = “###”, position = true, formatter = false ) }}

labelLine(Object)

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

itemStyle(Object)

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

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

{{ use: partial-pie-border-radius( prefix = “###” ) }}

emphasis(Object)

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

blur(Object)

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

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

select(Object)

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

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

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

{{ use: partial-marker( prefix = “#”, seriesType = “pie” ) }}

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

animationType(string) = ‘expansion’

Initial animation type.

  • 'expansion' Default expansion animation.
  • 'scale' Scale animation. You can use it with animationEasing='elasticOut' to have popup effect.

animationTypeUpdate(string) = ‘transition’

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

Animation type when data updates.

  • 'transition' Changing start and end angle of each sector from the old value to new value.
  • 'expansion' The whole pie expands again.

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

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

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

{{ target: partial-pie-label }}

#${prefix} show(boolean) = false

{{ if: ${position} }} #${prefix} position(string) = ‘outside’

The position of label.

**Options: **

  • 'outside'

    Outside of sectors of pie chart, which relates to corresponding sector through visual guide line.

  • 'inside'

    Inside the sectors of pie chart.

  • 'inner' is the same with 'inside'.

  • 'center'

    In the center of pie chart. See pie-doughnut example {{ /if }}

{{ if: ${formatter} }} #${prefix} formatter(string|Function)

{{ use: partial-1d-data-label-formatter( extra = { percent: { desc: ‘percentage’, type: ‘number’ } } ) }} {{ /if }}

#${prefix} rotate(boolean|number) = null

Label rotation.

  • If true, layout label radically.
  • If number, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.

{{ use: partial-text-style( prefix = ${prefix} ) }}

{{ target: pie-state }}

#${prefix} label(Object)

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

#${prefix} labelLine(Object)

{{ use: partial-label-line( prefix = “#” + ${prefix}, length = false, length2 = false, smooth = false ) }}

#${prefix} itemStyle(Object)

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

{{ use: partial-pie-border-radius( prefix = “#” + ${prefix} ) }}

{{ target: partial-pie-border-radius }}

#${prefix} borderRadius(number|string|Array)

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

To specify the roundness for corners of the sectors of the pie chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.

  • borderRadius: 10: means that both inner corner radius and outer corner radius are 10px.
  • borderRadius: '20%': means that both inner corner radius is 20% of the inner radius of the pie and outer corner radius is 20% of the outer radius of the pie.
  • borderRadius: [10, 20]: means that the inner corner radius is 10px and the outer corner radius is 20px.
  • borderRadius: ['20%', '50%']: means that the inner corner radius is 20% of the inner radius of the pie and the outer corner radius is 50% of the outer radius of the pie.