A series of recommendations
JavaScript Design Patterns and Development Practices
Issue an overview
- What kinds of pie charts are there? What are the differences between them? How do I convert?
- What’s the difference between a pie chart and a bar chart or line chart?
introduce
Pie charts are divided into area pie charts, ring pie charts and Nightingale rose charts
Before setting a pie chart, understand the basic elements of the pie chart
- The center of the pie chart (unlike the axis chart, the pie chart’s position in the container can be customized)
- The radius of the pie chart (confirm the size of the pie chart, two values can be set to convert a normal pie chart to a circular pie chart)
- RoseType (whether it is nightingale chart)
Different from other charts
| attribute | The pie chart | Axis chart (bar chart, line chart…) |
|---|---|---|
| The visual guide line of the label | There are | There is no |
| Tooltip Floating prompt type | Item, none | Item, Axis, None |
This introduces the concept of the category axis, which can be understood as the dimension (literal) axis. This is the X-axis, the Y-axis in the bar chart
Common properties
Visual guide line: labelLine
The visual guide line is divided into two sections and only takes effect when the position of the label is set to ‘outside’. It has two states: Normal and highlight
Relevant properties
- Length: the first length of the visual guide line
- Length2: The second length of the visual guide line
- Smooth: Whether the display is smooth
- LineStyle: Bootline style (you can set color, width, type…)
Tags: label
As a precondition of the boot line, tag. It describes additional information about a pie chart. It also has two states: Normal/highlight
Relevant properties
- Position: Indicates the position of the label. If the label is “outside”, it is displayed on the outside of the pie chart. Inside and inner are displayed on the inside of the pie chart. Center is generally used for circle charts. The label is located in the center of the pie chart
- Rich: Rich text style, you can customize some special effects
Circular diagram
To convert a common pie chart into a ring chart, you need to set radius (pie chart radius) to two values, which respectively represent the inner radius and outer radius
rose
To convert a normal pie chart to a rose chart, set roseType to ‘RADIUS’ or ‘area’
Mode difference
- Radius: displays the percentage of data in the central Angle of a sector and the size of data in the radius
- Area: indicates that the central angles of sectors are the same. The data size is displayed only by the radius