Native JavaScript pie charts, doughnut charts, and circular gradients (original work)

Add-ons

2026-07-26 04:25 4 次浏览 • 0 次下载 5.3KB

Native JavaScript pie charts, doughnut charts, and circular gradients (original work)

Plugin description: During development, I found that ECharts could not achieve circular gradient colors for pie charts and doughnut charts, and I could not find any other plugins that supported this feature. So I implemented one from scratch for everyone to use. Please modify it according to your actual needs. Feedback and discussions are welcome.

Last updated: 2019/7/8 4:43:42 PM

Changelog:Fixed some bugs and added several style configuration options, such as legends.

Published: 2019-07-07 23:34:45

Usage:

1	`drawCircle()`

Parameter list:

id: The ID of the element to which the chart will be rendered.
data: Display data
name: Data list name, displayed in the center label
value: Data value (required)
colors: [start, end] Gradient colors. Both values must be in RGB format.
radius: Doughnut chart radius. Supports number, string, or array values, such as 100, '100', '50%', [50], ['50%'], ['50%', '40%']. When using an array, the second element represents the inner circle radius. The default inner circle radius is 0.8 times the outer circle radius.
center: Coordinates of the doughnut chart center. Default: ['50%', '50%']. Specific numeric values are also supported, such as [100, 100].

Instance methods:

1	`update()`

Used to update data. The parameter is data.