Skip to Content

Wiki源代码5.8.2.3 Pie chart

由用户 maym 在 2025/03/10 07:59 保存的版本 14.2
显示最后作者
1 ==== **[Usage Scenario]** ====
2
3 A pie chart is a commonly used type of data visualization chart that presents data as a circular shape resembling a pie chart, displaying the proportions of different data classifications in a fan-shaped manner. It is suitable for the following scenarios:
4
5 * (((
6 **Proportional display:** A pie chart is suitable for displaying the proportion or proportion relationship of different categories in the population. For example, market share, the proportion of various expenses to total expenses, etc.
7 )))
8 * (((
9 **Category Display:** A pie chart can classify and display data according to different categories, visually showing comparisons between different categories. For example, the sales proportion of different products, the sales proportion of different regions, etc.
10 )))
11 * (((
12 **Trend analysis:** By observing the size changes of each sector in the pie chart, the trend and changes of the data can be analyzed. For example, seasonal changes in sales revenue, changes in the proportion of users in different age groups, etc.
13 )))
14 * (((
15 **Highlights**: Specific data or categories can be emphasized by highlighting a sector or several important sectors in the pie chart. For example, highlighting the market share of a certain product, highlighting the sales proportion of a certain region, etc.
16 )))
17
18 ==== **【 Basic Requirements 】** ====
19
20 饼图的基本要求如下：
21
22 (% style="width:402px" %)
23 |(% style="width:175px" %)分类字段|(% style="width:225px" %)数值字段
24 |(% style="width:175px" %)最多1个字段|(% style="width:225px" %)最多1个字段
25
26 ==== **【操作步骤】** ====
27
28 **Step-1 选择组件，配置数据源**
29
30 创建报表，在左上角选择饼状图，然后选定数据源，如图：
31
32 [[image:1729843622506-386.png||height="546" width="767"]]
33
34
35 **Step-2 选择图表展示字段**
36
37 将右边数据源中字段拖动放到**分类字段**、**数值字段**上
38
39 * (((
40 饼状图的数据源：
41
42 有了分类字段和数值字段，就可以根据数据的实际情况，绘制出正确的饼状图。下图中：将分类字段拖入销售物品类型，数值字段拖入销售数量，则可以得出：【按照销售物品类型分类后的销售数量的统计饼状图】
43
44
45 * (((
46 **分类字段：** 本字段表示数据的类别或分类，每个数据点都应该有一个对应的类别。类别字段可以是产品名称、地区名称、部门名称等，用于表示数据所属的具体类别。
47 )))
48 * (((
49 **数值字段：** 本字段表示每个类别的具体数值/数量。数值字段可以是销售额、销售数量、市场份额等，用于表示每个类别在总体中的比例或占比。
50
51 >
52
53 (((
54 ====== 如果在数值字段（虚线框）中拖入非数值类型的字段（如：字符串、日期、地点类型），会根据默认聚合方式（计数），将字符串、日期、地点转化为该字段出现的次数 ======
55 )))
56
57 [[image:1729749814387-113.png||height="669" width="1300"]]
58 )))
59 )))
60
61 **Step-3 样式设置**
62
63 分为三小类：【基础设置】、【标签】，【图例】，如下图：
64
65 [[image:1729750188515-947.png||height="766" width="1425"]]
66
67
68 (((
69
70 )))
71
72 (((
73
74
75
76 )))
77
78 ==== **【样式配置说明】** ====
79
80 |(% colspan="1" rowspan="1" %)(((
81
82 )))|(% colspan="1" rowspan="1" style="width:107px" %)(((
83 样式设置分类
84 )))|(% colspan="1" rowspan="1" style="width:150px" %)(((
85 配置项
86 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
87 用途
88 )))
89 |(% colspan="1" rowspan="14" %)(((
90 **饼状图**
91
92
93 )))|(% colspan="1" rowspan="6" style="width:107px" %)(((
94 基础设置
95
96
97 )))|(% colspan="1" rowspan="1" style="width:150px" %)(((
98 显示标题
99 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
100 控制画布左上角的标题是否显示的开关
101
102 [[image:1729754356435-491.png]]
103 )))
104 |(% colspan="1" rowspan="1" style="width:150px" %)(((
105 标题名称
106 )))|(% colspan="1" rowspan="1" style="width:1304px" %)支持用户自定义报表标题
107 |(% colspan="1" rowspan="1" style="width:150px" %)(((
108 帮助文字
109 )))|(% colspan="1" rowspan="1" style="width:1304px" %)开启后，标题右侧出现小问号，鼠标悬浮时，出现帮助文字具体内容
110 [[image:1729754478509-444.png]]
111 |(% colspan="1" rowspan="1" style="width:150px" %)(((
112 帮助文字内容
113 )))|(% colspan="1" rowspan="1" style="width:1304px" %)支持用户自定义帮助文字的文案，例如“本月销售总额统计”
114 |(% colspan="1" rowspan="1" style="width:150px" %)(((
115 饼状图类型
116 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
117 默认选中“常规”，第二选项：环形图，环形图效果如下：
118
119 [[image:1729754564047-207.png||height="451" width="1137"]]
120
121
122 )))
123 |(% colspan="1" rowspan="1" style="width:150px" %)(((
124 配色方案
125 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
126 支持用户自定义图形整体的配色方案
127 )))
128 |(% colspan="1" rowspan="5" style="width:107px" %)(((
129 标签
130
131
132 )))|(% colspan="1" rowspan="1" style="width:150px" %)(((
133 显示标签
134 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
135 (((
136 控制是否显示标签的开关，如下图：
137
138 [[image:1729754768467-631.png||height="523" width="1081"]]
139 )))
140
141 (((
142
143 )))
144 )))
145 |(% colspan="1" rowspan="1" style="width:150px" %)(((
146 颜色字号
147 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
148 略
149 )))
150 |(% colspan="1" rowspan="1" style="width:150px" %)(((
151 标签位置
152
153
154 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
155 支持3种模式：内部，外部，蜘蛛图
156 )))
157 |(% colspan="1" rowspan="1" style="width:150px" %)(((
158 标签内容
159
160
161 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
162 是标题、百分比、值的各种排列组合，默认选择【标题，百分比】如下，用户也可以改成其他内容，例如“标题，值（百分比）”，如下图：
163
164 [[image:1729756074259-175.png]]
165
166
167 )))
168 |(% colspan="1" rowspan="1" style="width:150px" %)(((
169 百分比小数位数
170 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
171 设置上述标签内容中，百分比的小数位数，例如设置成显示3位小数，如下图：
172
173 [[image:1729756197988-684.png]]
174
175
176
177 )))
178 |(% colspan="1" rowspan="3" style="width:107px" %)(((
179 图例
180 )))|(% colspan="1" rowspan="1" style="width:150px" %)(((
181 显示图例
182 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
183 默认开启， 如下图：
184
185 [[image:1729756246566-930.png]]
186 )))
187 |(% colspan="1" rowspan="1" style="width:150px" %)(((
188 图例位置
189 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
190 图例默认出现在画布的左上角，同时支持用户设置图例在画布中的位置
191
192
193
194 )))
195 |(% colspan="1" rowspan="1" style="width:150px" %)(((
196 颜色字号
197 )))|(% colspan="1" rowspan="1" style="width:1304px" %)支持用户根据需要自行调整图例的文字颜色和字体大小