Skip to Content

Wiki源代码5.8.2.3 饼状图

由用户 yinshi 在 2024/10/24 06:12 保存的版本 7.1
显示最后作者
1 ==== **【使用场景】** ====
2
3 饼状图是一种常用的数据可视化图表类型，它将数据呈现为一个类似于饼状的圆形，将不同数据分类的比例以扇形的方式展示出来，适用于以下一些场景：
4
5 * (((
6 **比例展示**： 饼状图适合展示不同类别在总体中的比例或占比关系。比如，市场份额、各种支出占总支出的比例等。
7 )))
8 * (((
9 **分类展示**： 饼状图可以将数据按照不同的类别进行分类展示，直观地展示各个类别之间的比较。比如，不同产品的销售比例、不同地区的销售占比等。
10 )))
11 * (((
12 **趋势分析**： 通过观察饼状图中各个扇形的大小变化，可以分析数据的趋势和变化情况。比如，销售额的季节性变化、不同年龄段用户的占比变化等。
13 )))
14 * (((
15 **重点突出**： 可以通过突出饼状图中某个扇形或几个重要的扇形，来强调特定的数据或类别。比如，突出某个产品的市场份额、突出某个地区的销售占比等。
16 )))
17
18
19 ==== **【基本要求】** ====
20
21 饼图的基本要求如下：
22
23 (% style="width:402px" %)
24 |(% style="width:175px" %)分类字段|(% style="width:225px" %)数值字段
25 |(% style="width:175px" %)最多1个字段|(% style="width:225px" %)最多1个字段
26
27 ==== **【操作步骤】** ====
28
29 **Step-1 选择组件，配置数据源**
30
31 创建报表，在左上角选择饼状图，然后选定数据源，如图：
32
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" %)(((
83 样式设置分类
84 )))|(% colspan="1" rowspan="1" %)(((
85 配置项
86 )))|(% colspan="1" rowspan="1" %)(((
87 形态
88 )))|(% colspan="1" rowspan="1" %)(((
89
90 )))
91 |(% colspan="1" rowspan="18" %)(((
92 **饼状图**
93
94
95 )))|(% colspan="1" rowspan="9" %)(((
96 基础
97
98
99 )))|(% colspan="1" rowspan="1" %)(((
100 显示标题
101 )))|(% colspan="1" rowspan="1" %)(((
102 开关
103 )))|(% colspan="1" rowspan="1" %)(((
104 默认开启
105 )))
106 |(% colspan="1" rowspan="1" %)(((
107 标题名称
108 )))|(% colspan="1" rowspan="1" %)(((
109 输入框
110 )))|(% colspan="1" rowspan="1" %)(((
111 默认输入：饼状图
112 )))
113 |(% colspan="1" rowspan="1" %)(((
114 帮助文字
115 )))|(% colspan="1" rowspan="1" %)(((
116 开关
117 )))|(% colspan="1" rowspan="1" %)(((
118 默认关闭
119 )))
120 |(% colspan="1" rowspan="1" %)(((
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" %)(((
132 默认选中“常规”，第二选项：环形图，环形图效果如下：
133
134 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=NTJjYWU5ZjE3Njc4MTk1MmE2NzhkZDYwMWExMjA4MDdfWnlaZEkxeDVHQVpMdnBCaW1JaUdSTGhISUYyaGxGaXpfVG9rZW46VFFHQWJBUXJTb0J3MGN4ektyMWNINVlvbkVlXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
135
136
137 )))
138 |(% colspan="1" rowspan="1" %)(((
139 配色方案
140 )))|(% colspan="1" rowspan="1" %)(((
141 按钮或下拉
142 )))|(% colspan="1" rowspan="1" %)(((
143
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" %)(((
167 标签
168
169
170 )))|(% colspan="1" rowspan="1" %)(((
171 显示标签
172 )))|(% colspan="1" rowspan="1" %)(((
173 开关
174 )))|(% colspan="1" rowspan="1" %)(((
175 默认开启
176 )))
177 |(% colspan="1" rowspan="1" %)(((
178 颜色字号
179 )))|(% colspan="1" rowspan="1" %)(((
180 拾色器+下拉
181 )))|(% colspan="1" rowspan="1" %)(((
182 默认：黑色，12号字
183 )))
184 |(% colspan="1" rowspan="1" %)(((
185 连接线
186 )))|(% colspan="1" rowspan="1" %)(((
187 开关
188 )))|(% colspan="1" rowspan="1" %)(((
189 默认开启
190 )))
191 |(% colspan="1" rowspan="1" %)(((
192 标签位置
193
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
209 )))
210 |(% colspan="1" rowspan="1" %)(((
211 标签内容
212
213
214 )))|(% colspan="1" rowspan="1" %)(((
215 下拉
216
217
218 )))|(% colspan="1" rowspan="1" %)(((
219 是标题、百分比、值的各种排列组合，默认选择【标题，百分比】如下：
220
221 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=M2FiYWI0ZDIyZGFiNzM0NGEyNTgwOTI2NGU2OWVjY2RfU292b0x5eFQxMFZwR2xHazc2YUwxNU5Eb2E4TXplTjFfVG9rZW46T2VVcWJpMXZ0b3ZOVjZ4TGJCZGNpV3BibnloXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
222
223
224 )))
225 |(% colspan="1" rowspan="1" %)(((
226 百分比小数位数
227 )))|(% colspan="1" rowspan="1" %)(((
228 下拉选择
229 )))|(% colspan="1" rowspan="1" %)(((
230 默认是2。
231
232 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=YmFkMjkzNTY2ZmIxOGY5MmFhNmM4OTRiZGQzMWQxYzVfUzhNTW44d1VBM3FSeERmeHgyYVNHYVk4RVhpSGJvblhfVG9rZW46WGhOUmI1VHRtb1BNWTB4cHJxOWNIbFZjbkxoXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
233
234
235 )))
236 |(% colspan="1" rowspan="3" %)(((
237 图例
238 )))|(% colspan="1" rowspan="1" %)(((
239 显示图例
240 )))|(% colspan="1" rowspan="1" %)(((
241 开关
242 )))|(% colspan="1" rowspan="1" %)(((
243 默认开启
244 )))
245 |(% colspan="1" rowspan="1" %)(((
246 图例位置
247 )))|(% colspan="1" rowspan="1" %)(((
248 八宫格
249 )))|(% colspan="1" rowspan="1" %)(((
250 默认选中：左上角。
251
252 注意：如果用户选中3点或9点这两个位置的时候， 图例需要**纵向**排列（如下图），其余位置是横向排列的。
253
254 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=MDFmOWViNzA5NjkzYzZhYjkzMDlkYTNmZTA0NDA1M2FfT2JpNFBwR2tDRTBBTGtGSVRYS2IxT2VjVzVsM2ZSc0FfVG9rZW46RjhHZGJaejlhbzUxV2Z4OEZwRmNsM1Iwbm1lXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
255
256
257 )))
258 |(% colspan="1" rowspan="1" %)(((
259 颜色字号
260 )))|(% colspan="1" rowspan="1" %)(((
261 拾色器+下拉
262 )))|(% colspan="1" rowspan="1" %)(((
263 默认：黑色，12号字
264 )))