Circular Progress Bar

The circular progress bar is an ECharts chart that supports drawing multiple progress rings at once.

Design Area	Chart Element	Requirement
Row Dimension	X-Axis	Place 0 or more dimension nodes
Column Dimension	Y-Axis	Place 1 or more dimension nodes for splitting metrics
Metric	Value	Place 1 or more metric nodes. Add a second metric for the maximum value, matched by metric position.

Multiple progress bars can be achieved by configuring metric splits via column dimensions or by using multiple metrics.
Supports dynamic maximum value configuration; can match maximum values by position. As shown in the image below, two metrics are configured, but only the first has a maximum value set.

Ring Color: For multiple progress rings, colors are controlled by the color palette.
Ring Width: Controls the thickness of the progress bar.
Radius: Controls the size of the ring within the grid, measured in percentage of the grid.
Background Color: Color of the progress track.
Maximum Value: Configure a static maximum value.
Value Position Offset: Controls the position of the percentage indicator in the center of the ring.
Title Name: Name configuration when displaying a single progress ring.
Title Position: Controls the position of the name within the ring.
Layout - Split: Controls the row and column splitting for multiple charts.

The circular progress bar is an ECharts chart that supports drawing multiple progress rings at once.

Design Area	Chart Element	Requirement
Row Dimension	X-Axis	Place 0 or more dimension nodes
Column Dimension	Y-Axis	Place 1 or more dimension nodes for splitting metrics
Metric	Value	Place 1 or more metric nodes. Add a second metric for the maximum value, matched by metric position.

Multiple progress bars can be achieved by configuring metric splits via column dimensions or by using multiple metrics.
Supports dynamic maximum value configuration; can match maximum values by position. As shown in the image below, two metrics are configured, but only the first has a maximum value set.

Ring Color: For multiple progress rings, colors are controlled by the color palette.
Ring Width: Controls the thickness of the progress bar.
Radius: Controls the size of the ring within the grid, measured in percentage of the grid.
Background Color: Color of the progress track.
Maximum Value: Configure a static maximum value.
Value Position Offset: Controls the position of the percentage indicator in the center of the ring.
Title Name: Name configuration when displaying a single progress ring.
Title Position: Controls the position of the name within the ring.
Layout - Split: Controls the row and column splitting for multiple charts.