Skip to Content

文档更改5.8.2.3 Pie chart

由 liuqing01 于 2025/06/30 11:36 最后修改
从版本 13.2
由yufei li编辑
在2025/02/14 02:14上
修改评论： Update document after refactoring.
到版本
由yinshi编辑
在2024/10/24 03:53上
修改评论： 该版本没有评论

摘要

细节

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