Skip to Content

文档更改5.8.2.3 Pie chart

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

摘要

细节

页面属性
内容
... ... @@ -1,39 +1,35 @@
1 -==== 【使用场景】 ====
1 +==== **【使用场景】** ====
2 2  
3 3   饼状图是一种常用的数据可视化图表类型，它将数据呈现为一个类似于饼状的圆形，将不同数据分类的比例以扇形的方式展示出来，适用于以下一些场景：
4 4  
5 5  * (((
6 -比例展示： 饼状图适合展示不同类别在总体中的比例或占比关系。比如，市场份额、各种支出占总支出的比例等。
6 +**比例展示**： 饼状图适合展示不同类别在总体中的比例或占比关系。比如，市场份额、各种支出占总支出的比例等。
7 7  )))
8 8  * (((
9 -分类展示： 饼状图可以将数据按照不同的类别进行分类展示，直观地展示各个类别之间的比较。比如，不同产品的销售比例、不同地区的销售占比等。
9 +**分类展示**： 饼状图可以将数据按照不同的类别进行分类展示，直观地展示各个类别之间的比较。比如，不同产品的销售比例、不同地区的销售占比等。
10 10  )))
11 11  * (((
12 -趋势分析： 通过观察饼状图中各个扇形的大小变化，可以分析数据的趋势和变化情况。比如，销售额的季节性变化、不同年龄段用户的占比变化等。
12 +**趋势分析**： 通过观察饼状图中各个扇形的大小变化，可以分析数据的趋势和变化情况。比如，销售额的季节性变化、不同年龄段用户的占比变化等。
13 13  )))
14 14  * (((
15 -重点突出： 可以通过突出饼状图中某个扇形或几个重要的扇形，来强调特定的数据或类别。比如，突出某个产品的市场份额、突出某个地区的销售占比等。
15 +**重点突出**： 可以通过突出饼状图中某个扇形或几个重要的扇形，来强调特定的数据或类别。比如，突出某个产品的市场份额、突出某个地区的销售占比等。
16 16  )))
17 17  
18 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=OGE0ZTFlYWMwNDY3ZGNmOGY0YmI2NDRmYjIyZDk1ZTRfbjBhNkxzcFN1OTBiR21ReWplNkxaR3JXajZYNms2WFFfVG9rZW46Q3pReWJXZnF5b0EyZUR4dmsyTmMzSVhNbkFkXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
18 +==== **【基本要求】** ====
19 19  
20 -
21 -
22 -==== 【基本要求】 ====
23 -
24 24   饼图的基本要求如下：
25 25  
26 -|分类字段|数值字段
27 -|最多1个字段|最多1个字段
22 +(% style="width:402px" %)
23 +|(% style="width:175px" %)分类字段|(% style="width:225px" %)数值字段
24 +|(% style="width:175px" %)最多1个字段|(% style="width:225px" %)最多1个字段
28 28  
26 +==== **【操作步骤】** ====
29 29  
30 -==== 【操作步骤】 ====
31 -
32 32   **Step-1 选择组件，配置数据源**
33 33  
34 34   创建报表，在左上角选择饼状图，然后选定数据源，如图：
35 35  
36 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=ZmE3ZmIwYWQ1YWVmM2Q1YTJlNWQyMTNkMmJlNmQ5YjBfWW1ZdUNIakpwM1dFbW1GSjc4OFZ0U2RVS29pR3oxbXhfVG9rZW46WWRKV2JYMU1Ob0doZE14d0I0MmN6ekh4bkFjXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
32 +[[image:1729843622506-386.png||height="546" width="767"]]
37 37  
38 38  
39 39   **Step-2 选择图表展示字段**
... ... @@ -43,229 +43,169 @@
43 43  * (((
44 44  饼状图的数据源：
45 45  
46 -如果在数值字段（虚线框）中拖入非数值类型的字段（如：字符串、日期、地点类型）：
42 + 有了分类字段和数值字段，就可以根据数据的实际情况，绘制出正确的饼状图。下图中：将分类字段拖入销售物品类型，数值字段拖入销售数量，则可以得出：【按照销售物品类型分类后的销售数量的统计饼状图】
47 47  
48 -会根据默认聚合方式（计数），将字符串、日期、地点转化为该字段出现的次数，作为实际的取值，传给报表引擎
49 49  
50 - 有了分类字段和数值字段，就可以根据数据的实际情况，绘制出正确的饼状图。下图中：将分类字段拖入销售物品类型，数值字段拖入销售收入，则可以得出：【按照销售物品类型分类后的销售收入饼状图】
51 -
52 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=YjgyYjYyOGU4ZTQ2NjM2MWNlN2RhMjNjY2Y5MTc2YzRfQWROaE9QRDRCQ3h1bW9FUEh5T3owWDF5Y3RqSEp0bWhfVG9rZW46QlJ2amJZOFgyb2REbjd4VDlPQmNUS3FCbnVmXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
53 -
54 - 注意：**分类字段**、**数值字段，都不能通过公式编辑器生成**
55 -
56 56  * (((
57 57  **分类字段：** 本字段表示数据的类别或分类，每个数据点都应该有一个对应的类别。类别字段可以是产品名称、地区名称、部门名称等，用于表示数据所属的具体类别。
58 58  )))
59 59  * (((
60 60  **数值字段：** 本字段表示每个类别的具体数值/数量。数值字段可以是销售额、销售数量、市场份额等，用于表示每个类别在总体中的比例或占比。
50 +
51 +>
52 +
53 +(((
54 +====== 如果在数值字段（虚线框）中拖入非数值类型的字段（如：字符串、日期、地点类型），会根据默认聚合方式（计数），将字符串、日期、地点转化为该字段出现的次数 ======
61 61  )))
56 +
57 +[[image:1729749814387-113.png||height="669" width="1300"]]
62 62  )))
63 -* (((
64 -条件过滤：支持
65 65  )))
66 66  
67 67   **Step-3 样式设置**
68 68  
69 - 分为三小类：【基础】、【标签】，【图例】，如下图：
63 + 分为三小类：【基础设置】、【标签】，【图例】，如下图：
70 70  
71 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=NTIyOTAxYWRlODIzZjRmZWY1N2VjNjY4YmMyMTc5ZTFfaFh4bHFGUm5TS1l1ZE1UZUNUalJFanJDaU1hMnQzT3pfVG9rZW46TVR0MGJteUpnb29xcEd4U0owOWNkN1VMbjNlXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
65 +[[image:1729750188515-947.png||height="766" width="1425"]]
72 72  
73 73  
74 -* (((
75 -支持调整饼图的颜色、尺寸
68 +(((
69 +
76 76  )))
77 -* (((
78 -基础饼图变环形图
79 -)))
80 -* (((
81 -调整环形图的内半径
82 -)))
83 83  
72 +(((
73 +
84 84  
85 -==== 【样式设置】 ====
75 +
76 +)))
86 86  
78 +==== **【样式配置说明】** ====
79 +
87 87  |(% colspan="1" rowspan="1" %)(((
88 88  
89 -)))|(% colspan="1" rowspan="1" %)(((
82 +)))|(% colspan="1" rowspan="1" style="width:107px" %)(((
90 90  样式设置分类
91 -)))|(% colspan="1" rowspan="1" %)(((
84 +)))|(% colspan="1" rowspan="1" style="width:150px" %)(((
92 92  配置项
93 -)))|(% colspan="1" rowspan="1" %)(((
94 -形态
95 -)))|(% colspan="1" rowspan="1" %)(((
96 -
86 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
87 +用途
97 97  )))
98 -|(% colspan="1" rowspan="18" %)(((
89 +|(% colspan="1" rowspan="14" %)(((
99 99  **饼状图**
100 100  
101 101  
102 -)))|(% colspan="1" rowspan="9" %)(((
103 -基础
93 +)))|(% colspan="1" rowspan="6" style="width:107px" %)(((
94 +基础设置
104 104  
105 105  
106 -)))|(% colspan="1" rowspan="1" %)(((
97 +)))|(% colspan="1" rowspan="1" style="width:150px" %)(((
107 107  显示标题
108 -)))|(% colspan="1" rowspan="1" %)(((
109 -开关
110 -)))|(% colspan="1" rowspan="1" %)(((
111 -默认开启
99 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
100 +控制画布左上角的标题是否显示的开关
101 +
102 +[[image:1729754356435-491.png]]
112 112  )))
113 -|(% colspan="1" rowspan="1" %)(((
104 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
114 114  标题名称
115 -)))|(% colspan="1" rowspan="1" %)(((
116 -输入框
117 -)))|(% colspan="1" rowspan="1" %)(((
118 -默认输入：饼状图
119 -)))
120 -|(% colspan="1" rowspan="1" %)(((
106 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)支持用户自定义报表标题
107 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
121 121  帮助文字
122 -)))|(% colspan="1" rowspan="1" %)(((
123 -开关
124 -)))|(% colspan="1" rowspan="1" %)(((
125 -默认关闭
126 -)))
127 -|(% colspan="1" rowspan="1" %)(((
109 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)开启后，标题右侧出现小问号，鼠标悬浮时，出现帮助文字具体内容
110 +[[image:1729754478509-444.png]]
111 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
128 128  帮助文字内容
129 -)))|(% colspan="1" rowspan="1" %)(((
130 -输入框
131 -)))|(% colspan="1" rowspan="1" %)(((
132 -占位提示：请输入
133 -)))
134 -|(% colspan="1" rowspan="1" %)(((
135 -折线图类型
136 -)))|(% colspan="1" rowspan="1" %)(((
137 -选项卡
138 -)))|(% colspan="1" rowspan="1" %)(((
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" %)(((
139 139  默认选中“常规”，第二选项：环形图，环形图效果如下：
140 140  
141 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=NTJjYWU5ZjE3Njc4MTk1MmE2NzhkZDYwMWExMjA4MDdfWnlaZEkxeDVHQVpMdnBCaW1JaUdSTGhISUYyaGxGaXpfVG9rZW46VFFHQWJBUXJTb0J3MGN4ektyMWNINVlvbkVlXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
119 +[[image:1729754564047-207.png||height="451" width="1137"]]
142 142  
143 143  
144 144  )))
145 -|(% colspan="1" rowspan="1" %)(((
123 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
146 146  配色方案
147 -)))|(% colspan="1" rowspan="1" %)(((
148 -按钮或下拉
149 -)))|(% colspan="1" rowspan="1" %)(((
150 -
125 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
126 +支持用户自定义图形整体的配色方案
151 151  )))
152 -|(% colspan="1" rowspan="1" %)(((
153 -启用导出
154 -)))|(% colspan="1" rowspan="1" %)(((
155 -开关
156 -)))|(% colspan="1" rowspan="1" %)(((
157 -默认打开
158 -)))
159 -|(% colspan="1" rowspan="1" %)(((
160 -导出格式
161 -)))|(% colspan="1" rowspan="1" %)(((
162 -多选
163 -)))|(% colspan="1" rowspan="1" %)(((
164 -同柱状图
165 -)))
166 -|(% colspan="1" rowspan="1" %)(((
167 -
168 -)))|(% colspan="1" rowspan="1" %)(((
169 -
170 -)))|(% colspan="1" rowspan="1" %)(((
171 -
172 -)))
173 -|(% colspan="1" rowspan="6" %)(((
128 +|(% colspan="1" rowspan="5" style="width:107px" %)(((
174 174  标签
175 175  
176 176  
177 -)))|(% colspan="1" rowspan="1" %)(((
132 +)))|(% colspan="1" rowspan="1" style="width:150px" %)(((
178 178  显示标签
179 -)))|(% colspan="1" rowspan="1" %)(((
180 -开关
181 -)))|(% colspan="1" rowspan="1" %)(((
182 -默认开启
134 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
135 +(((
136 +控制是否显示标签的开关，如下图：
137 +
138 +[[image:1729754768467-631.png||height="523" width="1081"]]
183 183  )))
184 -|(% colspan="1" rowspan="1" %)(((
185 -颜色字号
186 -)))|(% colspan="1" rowspan="1" %)(((
187 -拾色器+下拉
188 -)))|(% colspan="1" rowspan="1" %)(((
189 -默认：黑色，12号字
140 +
141 +(((
142 +
190 190  )))
191 -|(% colspan="1" rowspan="1" %)(((
192 -连接线
193 -)))|(% colspan="1" rowspan="1" %)(((
194 -开关
195 -)))|(% colspan="1" rowspan="1" %)(((
196 -默认开启
197 197  )))
198 -|(% colspan="1" rowspan="1" %)(((
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" %)(((
199 199  标签位置
200 200  
201 201  
202 -)))|(% colspan="1" rowspan="1" %)(((
203 -选项卡
204 -)))|(% colspan="1" rowspan="1" %)(((
154 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
205 205  内部，外部，蜘蛛图
206 206  
207 207  标签在内部的样式示例：
208 208  
209 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=MTkxOGEyZTAxZDMyYWYwNTgzYThlNjE4NjFlYTgzY2FfRUtkS1BFUzZpazNSNXlDSTZIYTNoM1hIREo1NUtCSDhfVG9rZW46Vkp2eGJnMERmbzQ1cFN4YXB3cWNxc1FkbmdlXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
159 +[[image:1729755807593-924.png]]
210 210  
211 211  标签为住蜘蛛图示例：
212 212  
213 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=ZjU0N2U1ZmRkNmRjNTNkNjlkMDU1YjljNmU3MDdlYzhfcElWRVcxejlSdE9zSktrVmZXcmxLTHBnaVRWZmtzWk1fVG9rZW46TnZyUWI2WDRMb0pta2d4S0pEN2NTRGpBbmdiXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
163 +[[image:1729755819541-398.png]]
214 214  
215 215  
216 216  )))
217 -|(% colspan="1" rowspan="1" %)(((
167 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
218 218  标签内容
219 219  
220 220  
221 -)))|(% colspan="1" rowspan="1" %)(((
222 -下拉
171 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
172 +是标题、百分比、值的各种排列组合，默认选择【标题，百分比】如下，用户也可以改成其他内容，例如“标题，值（百分比）”，如下图：
223 223  
224 -
225 -)))|(% colspan="1" rowspan="1" %)(((
226 -是标题、百分比、值的各种排列组合，默认选择【标题，百分比】如下：
174 +[[image:1729756074259-175.png]]
227 227  
228 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=M2FiYWI0ZDIyZGFiNzM0NGEyNTgwOTI2NGU2OWVjY2RfU292b0x5eFQxMFZwR2xHazc2YUwxNU5Eb2E4TXplTjFfVG9rZW46T2VVcWJpMXZ0b3ZOVjZ4TGJCZGNpV3BibnloXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
229 -
230 230  
231 231  )))
232 -|(% colspan="1" rowspan="1" %)(((
178 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
233 233  百分比小数位数
234 -)))|(% colspan="1" rowspan="1" %)(((
235 -下拉选择
236 -)))|(% colspan="1" rowspan="1" %)(((
237 -默认是2。
180 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
181 +设置上述标签内容中，百分比的小数位数，例如设置成显示3位小数，如下图：
238 238  
239 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=YmFkMjkzNTY2ZmIxOGY5MmFhNmM4OTRiZGQzMWQxYzVfUzhNTW44d1VBM3FSeERmeHgyYVNHYVk4RVhpSGJvblhfVG9rZW46WGhOUmI1VHRtb1BNWTB4cHJxOWNIbFZjbkxoXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
183 +[[image:1729756197988-684.png]]
240 240  
185 +
241 241  
242 242  )))
243 -|(% colspan="1" rowspan="3" %)(((
188 +|(% colspan="1" rowspan="3" style="width:107px" %)(((
244 244  图例
245 -)))|(% colspan="1" rowspan="1" %)(((
190 +)))|(% colspan="1" rowspan="1" style="width:150px" %)(((
246 246  显示图例
247 -)))|(% colspan="1" rowspan="1" %)(((
248 -开关
249 -)))|(% colspan="1" rowspan="1" %)(((
250 -默认开启
192 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
193 +默认开启， 如下图：
194 +
195 +[[image:1729756246566-930.png]]
251 251  )))
252 -|(% colspan="1" rowspan="1" %)(((
197 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
253 253  图例位置
254 -)))|(% colspan="1" rowspan="1" %)(((
255 -八宫格
256 -)))|(% colspan="1" rowspan="1" %)(((
257 -默认选中：左上角。
199 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
200 +图例默认出现在画布的左上角，同时支持用户设置图例在画布中的位置
258 258  
259 -注意：如果用户选中3点或9点这两个位置的时候， 图例需要**纵向**排列（如下图），其余位置是横向排列的。
260 260  
261 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=MDFmOWViNzA5NjkzYzZhYjkzMDlkYTNmZTA0NDA1M2FfT2JpNFBwR2tDRTBBTGtGSVRYS2IxT2VjVzVsM2ZSc0FfVG9rZW46RjhHZGJaejlhbzUxV2Z4OEZwRmNsM1Iwbm1lXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
262 -
263 263  
264 264  )))
265 -|(% colspan="1" rowspan="1" %)(((
205 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
266 266  颜色字号
267 -)))|(% colspan="1" rowspan="1" %)(((
268 -拾色器+下拉
269 -)))|(% colspan="1" rowspan="1" %)(((
270 -默认：黑色，12号字
271 -)))
207 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)支持用户根据需要自行调整图例的文字颜色和字体大小
1729749814387-113.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.yinshi
大小
... ... @@ -1,0 +1,1 @@
1 +97.7 KB
内容
1729750188515-947.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.yinshi
大小
... ... @@ -1,0 +1,1 @@
1 +73.6 KB
内容
1729754311290-456.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.yinshi
大小
... ... @@ -1,0 +1,1 @@
1 +26.7 KB
内容
1729754333571-786.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.yinshi
大小
... ... @@ -1,0 +1,1 @@
1 +11.1 KB
内容
1729754356435-491.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.yinshi
大小
... ... @@ -1,0 +1,1 @@
1 +19.1 KB
内容
1729754478509-444.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.yinshi
大小
... ... @@ -1,0 +1,1 @@
1 +20.4 KB
内容
1729754564047-207.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.yinshi
大小
... ... @@ -1,0 +1,1 @@
1 +73.4 KB
内容
1729754768467-631.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.yinshi
大小
... ... @@ -1,0 +1,1 @@
1 +51.1 KB
内容
1729755002756-406.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.yinshi
大小
... ... @@ -1,0 +1,1 @@
1 +16.5 KB
内容
1729755807593-924.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.yinshi
大小
... ... @@ -1,0 +1,1 @@
1 +14.7 KB
内容
1729755819541-398.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.yinshi
大小
... ... @@ -1,0 +1,1 @@
1 +26.9 KB
内容
1729756074259-175.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.yinshi
大小
... ... @@ -1,0 +1,1 @@
1 +68.2 KB
内容
1729756197988-684.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.yinshi
大小
... ... @@ -1,0 +1,1 @@
1 +43.2 KB
内容
1729756246566-930.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.yinshi
大小
... ... @@ -1,0 +1,1 @@
1 +27.7 KB
内容
1729843622506-386.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.yinshi
大小
... ... @@ -1,0 +1,1 @@
1 +37.5 KB
内容