Skip to Content

Wiki源代码5.8.2.3 饼状图

由用户 yinshi 在 2024/10/24 06:09 保存的版本 6.1
显示最后作者
1 ==== **【使用场景】** ====
2
3 饼状图是一种常用的数据可视化图表类型，它将数据呈现为一个类似于饼状的圆形，将不同数据分类的比例以扇形的方式展示出来，适用于以下一些场景：
4
5 * (((
6 **比例展示**： 饼状图适合展示不同类别在总体中的比例或占比关系。比如，市场份额、各种支出占总支出的比例等。
7 )))
8 * (((
9 **分类展示**： 饼状图可以将数据按照不同的类别进行分类展示，直观地展示各个类别之间的比较。比如，不同产品的销售比例、不同地区的销售占比等。
10 )))
11 * (((
12 **趋势分析**： 通过观察饼状图中各个扇形的大小变化，可以分析数据的趋势和变化情况。比如，销售额的季节性变化、不同年龄段用户的占比变化等。
13 )))
14 * (((
15 **重点突出**： 可以通过突出饼状图中某个扇形或几个重要的扇形，来强调特定的数据或类别。比如，突出某个产品的市场份额、突出某个地区的销售占比等。
16 )))
17
18
19
20 ==== **【基本要求】** ====
21
22 饼图的基本要求如下：
23
24 (% style="width:402px" %)
25 |(% style="width:175px" %)分类字段|(% style="width:225px" %)数值字段
26 |(% style="width:175px" %)最多1个字段|(% style="width:225px" %)最多1个字段
27
28 ==== **【操作步骤】** ====
29
30 **Step-1 选择组件，配置数据源**
31
32 创建报表，在左上角选择饼状图，然后选定数据源，如图：
33
34
35
36 **Step-2 选择图表展示字段**
37
38 将右边数据源中字段拖动放到**分类字段**、**数值字段**上
39
40 * (((
41 饼状图的数据源：
42
43 有了分类字段和数值字段，就可以根据数据的实际情况，绘制出正确的饼状图。下图中：将分类字段拖入销售物品类型，数值字段拖入销售数量，则可以得出：【按照销售物品类型分类后的销售数量的统计饼状图】
44
45
46 * (((
47 **分类字段：** 本字段表示数据的类别或分类，每个数据点都应该有一个对应的类别。类别字段可以是产品名称、地区名称、部门名称等，用于表示数据所属的具体类别。
48 )))
49 * (((
50 **数值字段：** 本字段表示每个类别的具体数值/数量。数值字段可以是销售额、销售数量、市场份额等，用于表示每个类别在总体中的比例或占比。
51
52 >(((
53 ====== 如果在数值字段（虚线框）中拖入非数值类型的字段（如：字符串、日期、地点类型），会根据默认聚合方式（计数），将字符串、日期、地点转化为该字段出现的次数 ======
54 )))
55
56 [[image:1729749814387-113.png||height="669" width="1300"]]
57 )))
58 )))
59
60 **Step-3 样式设置**
61
62 分为三小类：【基础】、【标签】，【图例】，如下图：
63
64 [[image:1729750188515-947.png||height="766" width="1425"]]
65
66
67 * (((
68 支持调整饼图的颜色、尺寸
69 )))
70 * (((
71 基础饼图变环形图
72 )))
73 * (((
74 调整环形图的内半径
75
76
77 )))
78
79 ==== **【样式配置说明】** ====
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
91 )))
92 |(% colspan="1" rowspan="18" %)(((
93 **饼状图**
94
95
96 )))|(% colspan="1" rowspan="9" %)(((
97 基础
98
99
100 )))|(% colspan="1" rowspan="1" %)(((
101 显示标题
102 )))|(% colspan="1" rowspan="1" %)(((
103 开关
104 )))|(% colspan="1" rowspan="1" %)(((
105 默认开启
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 默认选中“常规”，第二选项：环形图，环形图效果如下：
134
135 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=NTJjYWU5ZjE3Njc4MTk1MmE2NzhkZDYwMWExMjA4MDdfWnlaZEkxeDVHQVpMdnBCaW1JaUdSTGhISUYyaGxGaXpfVG9rZW46VFFHQWJBUXJTb0J3MGN4ektyMWNINVlvbkVlXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
136
137
138 )))
139 |(% colspan="1" rowspan="1" %)(((
140 配色方案
141 )))|(% colspan="1" rowspan="1" %)(((
142 按钮或下拉
143 )))|(% colspan="1" rowspan="1" %)(((
144
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
170
171 )))|(% colspan="1" rowspan="1" %)(((
172 显示标签
173 )))|(% colspan="1" rowspan="1" %)(((
174 开关
175 )))|(% colspan="1" rowspan="1" %)(((
176 默认开启
177 )))
178 |(% colspan="1" rowspan="1" %)(((
179 颜色字号
180 )))|(% colspan="1" rowspan="1" %)(((
181 拾色器+下拉
182 )))|(% colspan="1" rowspan="1" %)(((
183 默认：黑色，12号字
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" %)(((
193 标签位置
194
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
210 )))
211 |(% colspan="1" rowspan="1" %)(((
212 标签内容
213
214
215 )))|(% colspan="1" rowspan="1" %)(((
216 下拉
217
218
219 )))|(% colspan="1" rowspan="1" %)(((
220 是标题、百分比、值的各种排列组合，默认选择【标题，百分比】如下：
221
222 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=M2FiYWI0ZDIyZGFiNzM0NGEyNTgwOTI2NGU2OWVjY2RfU292b0x5eFQxMFZwR2xHazc2YUwxNU5Eb2E4TXplTjFfVG9rZW46T2VVcWJpMXZ0b3ZOVjZ4TGJCZGNpV3BibnloXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
223
224
225 )))
226 |(% colspan="1" rowspan="1" %)(((
227 百分比小数位数
228 )))|(% colspan="1" rowspan="1" %)(((
229 下拉选择
230 )))|(% colspan="1" rowspan="1" %)(((
231 默认是2。
232
233 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=YmFkMjkzNTY2ZmIxOGY5MmFhNmM4OTRiZGQzMWQxYzVfUzhNTW44d1VBM3FSeERmeHgyYVNHYVk4RVhpSGJvblhfVG9rZW46WGhOUmI1VHRtb1BNWTB4cHJxOWNIbFZjbkxoXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
234
235
236 )))
237 |(% colspan="1" rowspan="3" %)(((
238 图例
239 )))|(% colspan="1" rowspan="1" %)(((
240 显示图例
241 )))|(% colspan="1" rowspan="1" %)(((
242 开关
243 )))|(% colspan="1" rowspan="1" %)(((
244 默认开启
245 )))
246 |(% colspan="1" rowspan="1" %)(((
247 图例位置
248 )))|(% colspan="1" rowspan="1" %)(((
249 八宫格
250 )))|(% colspan="1" rowspan="1" %)(((
251 默认选中：左上角。
252
253 注意：如果用户选中3点或9点这两个位置的时候， 图例需要**纵向**排列（如下图），其余位置是横向排列的。
254
255 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=MDFmOWViNzA5NjkzYzZhYjkzMDlkYTNmZTA0NDA1M2FfT2JpNFBwR2tDRTBBTGtGSVRYS2IxT2VjVzVsM2ZSc0FfVG9rZW46RjhHZGJaejlhbzUxV2Z4OEZwRmNsM1Iwbm1lXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
256
257
258 )))
259 |(% colspan="1" rowspan="1" %)(((
260 颜色字号
261 )))|(% colspan="1" rowspan="1" %)(((
262 拾色器+下拉
263 )))|(% colspan="1" rowspan="1" %)(((
264 默认：黑色，12号字
265 )))