Skip to Content

文档更改5.8.2.3 Pie chart

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

摘要

细节

页面属性
标题
... ... @@ -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,23 +1,22 @@
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  
19 -==== **【基本要求】** ====
20 -
21 21   饼图的基本要求如下：
22 22  
23 23  (% style="width:402px" %)
... ... @@ -30,6 +30,7 @@
30 30  
31 31   创建报表，在左上角选择饼状图，然后选定数据源，如图：
32 32  
32 +[[image:1729843622506-386.png||height="546" width="767"]]
33 33  
34 34  
35 35   **Step-2 选择图表展示字段**
... ... @@ -79,186 +79,119 @@
79 79  
80 80  |(% colspan="1" rowspan="1" %)(((
81 81  
82 -)))|(% colspan="1" rowspan="1" %)(((
82 +)))|(% colspan="1" rowspan="1" style="width:107px" %)(((
83 83  样式设置分类
84 -)))|(% colspan="1" rowspan="1" %)(((
84 +)))|(% colspan="1" rowspan="1" style="width:150px" %)(((
85 85  配置项
86 -)))|(% colspan="1" rowspan="1" %)(((
87 -形态
88 -)))|(% colspan="1" rowspan="1" %)(((
89 -
86 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
87 +用途
90 90  )))
91 -|(% colspan="1" rowspan="18" %)(((
89 +|(% colspan="1" rowspan="14" %)(((
92 92  **饼状图**
93 93  
94 94  
95 -)))|(% colspan="1" rowspan="9" %)(((
96 -基础
93 +)))|(% colspan="1" rowspan="6" style="width:107px" %)(((
94 +基础设置
97 97  
98 98  
99 -)))|(% colspan="1" rowspan="1" %)(((
97 +)))|(% colspan="1" rowspan="1" style="width:150px" %)(((
100 100  显示标题
101 -)))|(% colspan="1" rowspan="1" %)(((
102 -开关
103 -)))|(% colspan="1" rowspan="1" %)(((
104 -默认开启
99 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
100 +控制画布左上角的标题是否显示的开关
101 +
102 +[[image:1729754356435-491.png]]
105 105  )))
106 -|(% colspan="1" rowspan="1" %)(((
104 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
107 107  标题名称
108 -)))|(% colspan="1" rowspan="1" %)(((
109 -输入框
110 -)))|(% colspan="1" rowspan="1" %)(((
111 -默认输入：饼状图
112 -)))
113 -|(% colspan="1" rowspan="1" %)(((
106 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)支持用户自定义报表标题
107 +|(% 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" %)(((
109 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)开启后，标题右侧出现小问号，鼠标悬浮时，出现帮助文字具体内容
110 +[[image:1729754478509-444.png]]
111 +|(% 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" %)(((
128 -折线图类型
129 -)))|(% colspan="1" rowspan="1" %)(((
130 -选项卡
131 -)))|(% 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" %)(((
132 132  默认选中“常规”，第二选项：环形图，环形图效果如下：
133 133  
134 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=NTJjYWU5ZjE3Njc4MTk1MmE2NzhkZDYwMWExMjA4MDdfWnlaZEkxeDVHQVpMdnBCaW1JaUdSTGhISUYyaGxGaXpfVG9rZW46VFFHQWJBUXJTb0J3MGN4ektyMWNINVlvbkVlXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
119 +[[image:1729754564047-207.png||height="451" width="1137"]]
135 135  
136 136  
137 137  )))
138 -|(% colspan="1" rowspan="1" %)(((
123 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
139 139  配色方案
140 -)))|(% colspan="1" rowspan="1" %)(((
141 -按钮或下拉
142 -)))|(% colspan="1" rowspan="1" %)(((
143 -
125 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
126 +支持用户自定义图形整体的配色方案
144 144  )))
145 -|(% colspan="1" rowspan="1" %)(((
146 -启用导出
147 -)))|(% colspan="1" rowspan="1" %)(((
148 -开关
149 -)))|(% colspan="1" rowspan="1" %)(((
150 -默认打开
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="6" %)(((
128 +|(% colspan="1" rowspan="5" style="width:107px" %)(((
167 167  标签
168 168  
169 169  
170 -)))|(% colspan="1" rowspan="1" %)(((
132 +)))|(% colspan="1" rowspan="1" style="width:150px" %)(((
171 171  显示标签
172 -)))|(% colspan="1" rowspan="1" %)(((
173 -开关
174 -)))|(% colspan="1" rowspan="1" %)(((
175 -默认开启
134 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
135 +(((
136 +控制是否显示标签的开关，如下图：
137 +
138 +[[image:1729754768467-631.png||height="523" width="1081"]]
176 176  )))
177 -|(% colspan="1" rowspan="1" %)(((
178 -颜色字号
179 -)))|(% colspan="1" rowspan="1" %)(((
180 -拾色器+下拉
181 -)))|(% colspan="1" rowspan="1" %)(((
182 -默认：黑色，12号字
140 +
141 +(((
142 +
183 183  )))
184 -|(% colspan="1" rowspan="1" %)(((
185 -连接线
186 -)))|(% colspan="1" rowspan="1" %)(((
187 -开关
188 -)))|(% colspan="1" rowspan="1" %)(((
189 -默认开启
190 190  )))
191 -|(% 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" %)(((
192 192  标签位置
193 193  
194 194  
195 -)))|(% colspan="1" rowspan="1" %)(((
196 -选项卡
197 -)))|(% colspan="1" rowspan="1" %)(((
198 -内部，外部，蜘蛛图
199 -
200 -标签在内部的样式示例：
201 -
202 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=MTkxOGEyZTAxZDMyYWYwNTgzYThlNjE4NjFlYTgzY2FfRUtkS1BFUzZpazNSNXlDSTZIYTNoM1hIREo1NUtCSDhfVG9rZW46Vkp2eGJnMERmbzQ1cFN4YXB3cWNxc1FkbmdlXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
203 -
204 -标签为住蜘蛛图示例：
205 -
206 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=ZjU0N2U1ZmRkNmRjNTNkNjlkMDU1YjljNmU3MDdlYzhfcElWRVcxejlSdE9zSktrVmZXcmxLTHBnaVRWZmtzWk1fVG9rZW46TnZyUWI2WDRMb0pta2d4S0pEN2NTRGpBbmdiXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
207 -
208 -
154 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
155 +支持3种模式：内部，外部，蜘蛛图
209 209  )))
210 -|(% colspan="1" rowspan="1" %)(((
157 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
211 211  标签内容
212 212  
213 213  
214 -)))|(% colspan="1" rowspan="1" %)(((
215 -下拉
161 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
162 +是标题、百分比、值的各种排列组合，默认选择【标题，百分比】如下，用户也可以改成其他内容，例如“标题，值（百分比）”，如下图：
216 216  
217 -
218 -)))|(% colspan="1" rowspan="1" %)(((
219 -是标题、百分比、值的各种排列组合，默认选择【标题，百分比】如下：
164 +[[image:1729756074259-175.png]]
220 220  
221 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=M2FiYWI0ZDIyZGFiNzM0NGEyNTgwOTI2NGU2OWVjY2RfU292b0x5eFQxMFZwR2xHazc2YUwxNU5Eb2E4TXplTjFfVG9rZW46T2VVcWJpMXZ0b3ZOVjZ4TGJCZGNpV3BibnloXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
222 -
223 223  
224 224  )))
225 -|(% colspan="1" rowspan="1" %)(((
168 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
226 226  百分比小数位数
227 -)))|(% colspan="1" rowspan="1" %)(((
228 -下拉选择
229 -)))|(% colspan="1" rowspan="1" %)(((
230 -默认是2。
170 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
171 +设置上述标签内容中，百分比的小数位数，例如设置成显示3位小数，如下图：
231 231  
232 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=YmFkMjkzNTY2ZmIxOGY5MmFhNmM4OTRiZGQzMWQxYzVfUzhNTW44d1VBM3FSeERmeHgyYVNHYVk4RVhpSGJvblhfVG9rZW46WGhOUmI1VHRtb1BNWTB4cHJxOWNIbFZjbkxoXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
173 +[[image:1729756197988-684.png]]
233 233  
175 +
234 234  
235 235  )))
236 -|(% colspan="1" rowspan="3" %)(((
178 +|(% colspan="1" rowspan="3" style="width:107px" %)(((
237 237  图例
238 -)))|(% colspan="1" rowspan="1" %)(((
180 +)))|(% colspan="1" rowspan="1" style="width:150px" %)(((
239 239  显示图例
240 -)))|(% colspan="1" rowspan="1" %)(((
241 -开关
242 -)))|(% colspan="1" rowspan="1" %)(((
243 -默认开启
182 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
183 +默认开启， 如下图：
184 +
185 +[[image:1729756246566-930.png]]
244 244  )))
245 -|(% colspan="1" rowspan="1" %)(((
187 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
246 246  图例位置
247 -)))|(% colspan="1" rowspan="1" %)(((
248 -八宫格
249 -)))|(% colspan="1" rowspan="1" %)(((
250 -默认选中：左上角。
189 +)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
190 +图例默认出现在画布的左上角，同时支持用户设置图例在画布中的位置
251 251  
252 -注意：如果用户选中3点或9点这两个位置的时候， 图例需要**纵向**排列（如下图），其余位置是横向排列的。
253 253  
254 -[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=MDFmOWViNzA5NjkzYzZhYjkzMDlkYTNmZTA0NDA1M2FfT2JpNFBwR2tDRTBBTGtGSVRYS2IxT2VjVzVsM2ZSc0FfVG9rZW46RjhHZGJaejlhbzUxV2Z4OEZwRmNsM1Iwbm1lXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
255 -
256 256  
257 257  )))
258 -|(% colspan="1" rowspan="1" %)(((
195 +|(% colspan="1" rowspan="1" style="width:150px" %)(((
259 259  颜色字号
260 -)))|(% colspan="1" rowspan="1" %)(((
261 -拾色器+下拉
262 -)))|(% colspan="1" rowspan="1" %)(((
263 -默认：黑色，12号字
264 -)))
197 +)))|(% 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
内容