Skip to Content

文档更改5.8.2.3 Pie chart

由 liuqing01 于 2025/06/30 11:36 最后修改
从版本 6.1
由yinshi编辑
在2024/10/24 06:09上
修改评论： 该版本没有评论
到版本
由maym编辑
在2025/03/10 08:15上
修改评论： 该版本没有评论

摘要

细节

页面属性
标题
... ... @@ -1,1 +1,1 @@
1 -5.8.2.3 饼状图
1 +5.8.2.3 Pie chart
父
... ... @@ -1,1 +1,1 @@
1 -Main.5\. 设计应用.5\.8 报表设计.5\.8\.2 报表设计器.WebHome
1 +Egret Cloud Operation manual.5\. 设计应用.5\.8 报表设计.5\.8\.2 报表设计器.WebHome
文档作者
... ... @@ -1,1 +1,1 @@
1 -XWiki.yinshi
1 +XWiki.maym
内容
... ... @@ -1,56 +1,55 @@
1 -==== **【使用场景】** ====
1 +==== **[Usage Scenario]** ====
2 2  
3 - 饼状图是一种常用的数据可视化图表类型，它将数据呈现为一个类似于饼状的圆形，将不同数据分类的比例以扇形的方式展示出来，适用于以下一些场景：
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 4  
5 5  * (((
6 -**比例展示**： 饼状图适合展示不同类别在总体中的比例或占比关系。比如，市场份额、各种支出占总支出的比例等。
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 7  )))
8 8  * (((
9 -**分类展示**： 饼状图可以将数据按照不同的类别进行分类展示，直观地展示各个类别之间的比较。比如，不同产品的销售比例、不同地区的销售占比等。
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 10  )))
11 11  * (((
12 -**趋势分析**： 通过观察饼状图中各个扇形的大小变化，可以分析数据的趋势和变化情况。比如，销售额的季节性变化、不同年龄段用户的占比变化等。
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 13  )))
14 14  * (((
15 -**重点突出**： 可以通过突出饼状图中某个扇形或几个重要的扇形，来强调特定的数据或类别。比如，突出某个产品的市场份额、突出某个地区的销售占比等。
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 16  )))
17 17  
18 +==== **[Basic Requirements ]** ====
18 18  
20 + The basic requirements for a pie chart are as follows:
19 19  
20 -==== **【基本要求】** ====
22 +(% style="width:584px" %)
23 +|(% style="width:280px" %)Category Field|(% style="width:300px" %)Mumeric Field
24 +|(% style="width:280px" %)Only one field can be configured|(% style="width:300px" %)Only one field can be configured
21 21  
22 - 饼图的基本要求如下：
26 +==== Only one field can be configured ====
23 23  
24 -(% style="width:402px" %)
25 -|(% style="width:175px" %)分类字段|(% style="width:225px" %)数值字段
26 -|(% style="width:175px" %)最多1个字段|(% style="width:225px" %)最多1个字段
28 + **Step-1 Select components and configure data sources**
27 27  
28 -==== **【操作步骤】** ====
30 + Create a report, select the pie chart in the upper left corner, and then choose the data source, as shown in the figure:
29 29  
30 - **Step-1 选择组件，配置数据源**
32 +[[image:1729843622506-386.png||height="546" width="767"]]
31 31  
32 - 创建报表，在左上角选择饼状图，然后选定数据源，如图：
33 33  
35 + **Step-2 Select chart display fields**
34 34  
37 + Drag and drop the fields from the data source on the right onto the classification and numerical fields
35 35  
36 - **Step-2 选择图表展示字段**
37 -
38 - 将右边数据源中字段拖动放到**分类字段**、**数值字段**上
39 -
40 40  * (((
41 -饼状图的数据源：
40 +Data source for pie chart:
42 42  
43 - 有了分类字段和数值字段，就可以根据数据的实际情况，绘制出正确的饼状图。下图中：将分类字段拖入销售物品类型，数值字段拖入销售数量，则可以得出：【按照销售物品类型分类后的销售数量的统计饼状图】
42 + With the classification field and numerical field, it is possible to draw the correct pie chart based on the actual situation of the data. In the following figure:将销售物品类型拖入分类字段中，将销售数量拖入数值字段中，则可以得出：【按照销售物品类型分类后的销售数量的统计饼状图】
44 44  
45 45  
46 46  * (((
47 -**分类字段：** 本字段表示数据的类别或分类，每个数据点都应该有一个对应的类别。类别字段可以是产品名称、地区名称、部门名称等，用于表示数据所属的具体类别。
46 +**Classification field:** This field represents the category or classification of the data, and each data point should have a corresponding category. The category field can be product name, region name, department name, etc., used to indicate the specific category to which the data belongs.
48 48  )))
49 49  * (((
50 -**数值字段：** 本字段表示每个类别的具体数值/数量。数值字段可以是销售额、销售数量、市场份额等，用于表示每个类别在总体中的比例或占比。
49 +**Numerical field:** This field represents the specific numerical value/quantity for each category. Numerical fields can be sales revenue, sales quantity, market share, etc., used to represent the proportion or percentage of each category in the overall population.
51 51  
52 ->(((
53 -====== 如果在数值字段（虚线框）中拖入非数值类型的字段（如：字符串、日期、地点类型），会根据默认聚合方式（计数），将字符串、日期、地点转化为该字段出现的次数 ======
51 +(((
52 +====== If a non numeric field (such as string, date, location type) is dragged into a numeric field (dashed box), the string, date, location will be converted to the number of times the field appears based on the default aggregation method (count) ======
54 54  )))
55 55  
56 56  [[image:1729749814387-113.png||height="669" width="1300"]]
... ... @@ -57,209 +57,116 @@
57 57  )))
58 58  )))
59 59  
60 - **Step-3 样式设置**
59 + **Step-3 Style settings**
61 61  
62 - 分为三小类：【基础】、【标签】，【图例】，如下图：
61 + Divided into three categories: Basic Settings, Labels, and Legends, as shown in the following figure:
63 63  
64 64  [[image:1729750188515-947.png||height="766" width="1425"]]
65 65  
66 66  
67 -* (((
68 -支持调整饼图的颜色、尺寸
66 +(((
67 +
69 69  )))
70 -* (((
71 -基础饼图变环形图
72 -)))
73 -* (((
74 -调整环形图的内半径
75 75  
70 +(((
76 76  
72 +
73 +
77 77  )))
78 78  
79 -==== **【样式配置说明】** ====
76 +==== **[Style Configuration Description]** ====
80 80  
81 -|(% colspan="1" rowspan="1" %)(((
82 -
83 -)))|(% colspan="1" rowspan="1" %)(((
84 -样式设置分类
85 -)))|(% colspan="1" rowspan="1" %)(((
86 -配置项
87 -)))|(% colspan="1" rowspan="1" %)(((
88 -形态
89 -)))|(% colspan="1" rowspan="1" %)(((
90 -
78 +|(% colspan="1" rowspan="1" style="width:107px" %)Classification|(% colspan="1" rowspan="1" style="width:150px" %)Configuration Items|(% colspan="1" rowspan="1" style="width:1304px" %)(((
79 +Purpose
91 91  )))
92 -|(% colspan="1" rowspan="18" %)(((
93 -**饼状图**
81 +|(% colspan="1" rowspan="6" style="width:107px" %)(((
82 +Basic Style
94 94  
95 95  
96 -)))|(% colspan="1" rowspan="9" %)(((
97 -基础
85 +)))|(% colspan="1" rowspan="1" style="width:150px" %)Show heading|(% colspan="1" rowspan="1" style="width:1304px" %)(((
86 +Control whether the chart title in the upper left corner of the canvas is displayed. When closed, the chart title will not be displayed in the report, The words "柱状图1" are shown in the following figure；
98 98  
99 -
100 -)))|(% colspan="1" rowspan="1" %)(((
101 -显示标题
102 -)))|(% colspan="1" rowspan="1" %)(((
103 -开关
104 -)))|(% colspan="1" rowspan="1" %)(((
105 -默认开启
88 +[[image:1729754356435-491.png]]
106 106  )))
107 -|(% colspan="1" rowspan="1" %)(((
108 -标题名称
109 -)))|(% colspan="1" rowspan="1" %)(((
110 -输入框
111 -)))|(% colspan="1" rowspan="1" %)(((
112 -默认输入：饼状图
113 -)))
114 -|(% colspan="1" rowspan="1" %)(((
115 -帮助文字
116 -)))|(% colspan="1" rowspan="1" %)(((
117 -开关
118 -)))|(% colspan="1" rowspan="1" %)(((
119 -默认关闭
120 -)))
121 -|(% colspan="1" rowspan="1" %)(((
122 -帮助文字内容
123 -)))|(% colspan="1" rowspan="1" %)(((
124 -输入框
125 -)))|(% colspan="1" rowspan="1" %)(((
126 -占位提示：请输入
127 -)))
128 -|(% colspan="1" rowspan="1" %)(((
129 -折线图类型
130 -)))|(% colspan="1" rowspan="1" %)(((
131 -选项卡
132 -)))|(% colspan="1" rowspan="1" %)(((
133 -默认选中“常规”，第二选项：环形图，环形图效果如下：
90 +|(% colspan="1" rowspan="1" style="width:150px" %)Chart title|(% colspan="1" rowspan="1" style="width:1304px" %)You can name the chart by yourself
91 +|(% colspan="1" rowspan="1" style="width:150px" %)Help text|(% colspan="1" rowspan="1" style="width:1304px" %)Control whether the help copy is displayed in the chart. If enabled, client users can see a "?" icon after the chart title and the corresponding help copy when moving the mouse over the icon;
92 +[[image:1729754478509-444.png]]
93 +|(% colspan="1" rowspan="1" style="width:150px" %)Help text content|(% colspan="1" rowspan="1" style="width:1304px" %)Enter a description of the chart here to help client users understand the chart data;
94 +|(% colspan="1" rowspan="1" style="width:150px" %)Pie chart type|(% colspan="1" rowspan="1" style="width:1304px" %)(((
95 +By default, "General" is selected. The second option is a circular chart, which has the following effect:
134 134  
135 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=NTJjYWU5ZjE3Njc4MTk1MmE2NzhkZDYwMWExMjA4MDdfWnlaZEkxeDVHQVpMdnBCaW1JaUdSTGhISUYyaGxGaXpfVG9rZW46VFFHQWJBUXJTb0J3MGN4ektyMWNINVlvbkVlXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
97 +[[image:1729754564047-207.png||height="451" width="1137"]]
136 136  
137 137  
138 138  )))
139 -|(% colspan="1" rowspan="1" %)(((
140 -配色方案
141 -)))|(% colspan="1" rowspan="1" %)(((
142 -按钮或下拉
143 -)))|(% colspan="1" rowspan="1" %)(((
101 +|(% colspan="1" rowspan="1" style="width:150px" %)Color scheme|(% colspan="1" rowspan="1" style="width:1304px" %)Customize the color scheme of the Y-axis pillar；
102 +|(% colspan="1" rowspan="5" style="width:107px" %)(((
103 +Label
104 +
144 144  
106 +)))|(% colspan="1" rowspan="1" style="width:150px" %)(((
107 +Display Label
108 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
109 +(((
110 +Control whether to display the labels of the pie chart, as shown in the following figure:
111 +
112 +[[image:1729754768467-631.png||height="523" width="1081"]]
145 145  )))
146 -|(% colspan="1" rowspan="1" %)(((
147 -启用导出
148 -)))|(% colspan="1" rowspan="1" %)(((
149 -开关
150 -)))|(% colspan="1" rowspan="1" %)(((
151 -默认打开
152 -)))
153 -|(% colspan="1" rowspan="1" %)(((
154 -导出格式
155 -)))|(% colspan="1" rowspan="1" %)(((
156 -多选
157 -)))|(% colspan="1" rowspan="1" %)(((
158 -同柱状图
159 -)))
160 -|(% colspan="1" rowspan="1" %)(((
161 -
162 -)))|(% colspan="1" rowspan="1" %)(((
163 -
164 -)))|(% colspan="1" rowspan="1" %)(((
165 -
166 -)))
167 -|(% colspan="1" rowspan="6" %)(((
168 -标签
169 169  
115 +(((
170 170  
171 -)))|(% colspan="1" rowspan="1" %)(((
172 -显示标签
173 -)))|(% colspan="1" rowspan="1" %)(((
174 -开关
175 -)))|(% colspan="1" rowspan="1" %)(((
176 -默认开启
177 177  )))
178 -|(% colspan="1" rowspan="1" %)(((
118 +)))
119 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
179 179  颜色字号
180 -)))|(% colspan="1" rowspan="1" %)(((
181 -拾色器+下拉
182 -)))|(% colspan="1" rowspan="1" %)(((
183 -默认：黑色，12号字
121 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
122 +略
184 184  )))
185 -|(% colspan="1" rowspan="1" %)(((
186 -连接线
187 -)))|(% colspan="1" rowspan="1" %)(((
188 -开关
189 -)))|(% colspan="1" rowspan="1" %)(((
190 -默认开启
191 -)))
192 -|(% colspan="1" rowspan="1" %)(((
124 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
193 193  标签位置
194 194  
195 195  
196 -)))|(% colspan="1" rowspan="1" %)(((
197 -选项卡
198 -)))|(% colspan="1" rowspan="1" %)(((
199 -内部，外部，蜘蛛图
200 -
201 -标签在内部的样式示例：
202 -
203 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=MTkxOGEyZTAxZDMyYWYwNTgzYThlNjE4NjFlYTgzY2FfRUtkS1BFUzZpazNSNXlDSTZIYTNoM1hIREo1NUtCSDhfVG9rZW46Vkp2eGJnMERmbzQ1cFN4YXB3cWNxc1FkbmdlXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
204 -
205 -标签为住蜘蛛图示例：
206 -
207 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=ZjU0N2U1ZmRkNmRjNTNkNjlkMDU1YjljNmU3MDdlYzhfcElWRVcxejlSdE9zSktrVmZXcmxLTHBnaVRWZmtzWk1fVG9rZW46TnZyUWI2WDRMb0pta2d4S0pEN2NTRGpBbmdiXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
208 -
209 -
128 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
129 +支持3种模式：内部，外部，蜘蛛图
210 210  )))
211 -|(% colspan="1" rowspan="1" %)(((
131 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
212 212  标签内容
213 213  
214 214  
215 -)))|(% colspan="1" rowspan="1" %)(((
216 -下拉
135 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
136 +是标题、百分比、值的各种排列组合，默认选择【标题，百分比】如下，用户也可以改成其他内容，例如“标题，值（百分比）”，如下图：
217 217  
218 -
219 -)))|(% colspan="1" rowspan="1" %)(((
220 -是标题、百分比、值的各种排列组合，默认选择【标题，百分比】如下：
138 +[[image:1729756074259-175.png]]
221 221  
222 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=M2FiYWI0ZDIyZGFiNzM0NGEyNTgwOTI2NGU2OWVjY2RfU292b0x5eFQxMFZwR2xHazc2YUwxNU5Eb2E4TXplTjFfVG9rZW46T2VVcWJpMXZ0b3ZOVjZ4TGJCZGNpV3BibnloXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
223 -
224 224  
225 225  )))
226 -|(% colspan="1" rowspan="1" %)(((
142 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
227 227  百分比小数位数
228 -)))|(% colspan="1" rowspan="1" %)(((
229 -下拉选择
230 -)))|(% colspan="1" rowspan="1" %)(((
231 -默认是2。
144 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
145 +设置上述标签内容中，百分比的小数位数，例如设置成显示3位小数，如下图：
232 232  
233 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=YmFkMjkzNTY2ZmIxOGY5MmFhNmM4OTRiZGQzMWQxYzVfUzhNTW44d1VBM3FSeERmeHgyYVNHYVk4RVhpSGJvblhfVG9rZW46WGhOUmI1VHRtb1BNWTB4cHJxOWNIbFZjbkxoXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
147 +[[image:1729756197988-684.png]]
234 234  
149 +
235 235  
236 236  )))
237 -|(% colspan="1" rowspan="3" %)(((
152 +|(% colspan="1" rowspan="3" style="width:107px" %)(((
238 238  图例
239 -)))|(% colspan="1" rowspan="1" %)(((
154 +)))|(% colspan="1" rowspan="1" style="width:150px" %)(((
240 240  显示图例
241 -)))|(% colspan="1" rowspan="1" %)(((
242 -开关
243 -)))|(% colspan="1" rowspan="1" %)(((
244 -默认开启
156 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
157 +默认开启， 如下图：
158 +
159 +[[image:1729756246566-930.png]]
245 245  )))
246 -|(% colspan="1" rowspan="1" %)(((
161 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
247 247  图例位置
248 -)))|(% colspan="1" rowspan="1" %)(((
249 -八宫格
250 -)))|(% colspan="1" rowspan="1" %)(((
251 -默认选中：左上角。
163 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
164 +图例默认出现在画布的左上角，同时支持用户设置图例在画布中的位置
252 252  
253 -注意：如果用户选中3点或9点这两个位置的时候， 图例需要**纵向**排列（如下图），其余位置是横向排列的。
254 254  
255 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=MDFmOWViNzA5NjkzYzZhYjkzMDlkYTNmZTA0NDA1M2FfT2JpNFBwR2tDRTBBTGtGSVRYS2IxT2VjVzVsM2ZSc0FfVG9rZW46RjhHZGJaejlhbzUxV2Z4OEZwRmNsM1Iwbm1lXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
256 -
257 257  
258 258  )))
259 -|(% colspan="1" rowspan="1" %)(((
169 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
260 260  颜色字号
261 -)))|(% colspan="1" rowspan="1" %)(((
262 -拾色器+下拉
263 -)))|(% colspan="1" rowspan="1" %)(((
264 -默认：黑色，12号字
265 -)))
171 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)支持用户根据需要自行调整图例的文字颜色和字体大小
1729754311290-456.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +26.7 KB
内容
1729754333571-786.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +11.1 KB
内容
1729754356435-491.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +19.1 KB
内容
1729754478509-444.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +20.4 KB
内容
1729754564047-207.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +73.4 KB
内容
1729754768467-631.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +51.1 KB
内容
1729755002756-406.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +16.5 KB
内容
1729755807593-924.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +14.7 KB
内容
1729755819541-398.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +26.9 KB
内容
1729756074259-175.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +68.2 KB
内容
1729756197988-684.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +43.2 KB
内容
1729756246566-930.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +27.7 KB
内容
1729843622506-386.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.YufeiLi
大小
... ... @@ -1,0 +1,1 @@
1 +37.5 KB
内容