Skip to Content

Wiki源代码5.8.2.3 饼状图

由用户 yinshi 在 2024/10/24 06:12 保存的版本 7.1
隐藏最后作者
yinshi 3.1 1 ==== **【使用场景】** ====
yinshi 1.1 2
3 饼状图是一种常用的数据可视化图表类型，它将数据呈现为一个类似于饼状的圆形，将不同数据分类的比例以扇形的方式展示出来，适用于以下一些场景：
4
5 * (((
yinshi 4.1 6 **比例展示**： 饼状图适合展示不同类别在总体中的比例或占比关系。比如，市场份额、各种支出占总支出的比例等。
yinshi 1.1 7 )))
8 * (((
yinshi 4.1 9 **分类展示**： 饼状图可以将数据按照不同的类别进行分类展示，直观地展示各个类别之间的比较。比如，不同产品的销售比例、不同地区的销售占比等。
yinshi 1.1 10 )))
11 * (((
yinshi 4.1 12 **趋势分析**： 通过观察饼状图中各个扇形的大小变化，可以分析数据的趋势和变化情况。比如，销售额的季节性变化、不同年龄段用户的占比变化等。
yinshi 1.1 13 )))
14 * (((
yinshi 4.1 15 **重点突出**： 可以通过突出饼状图中某个扇形或几个重要的扇形，来强调特定的数据或类别。比如，突出某个产品的市场份额、突出某个地区的销售占比等。
yinshi 1.1 16 )))
17
18
yinshi 3.1 19 ==== **【基本要求】** ====
yinshi 1.1 20
21 饼图的基本要求如下：
22
yinshi 5.1 23 (% style="width:402px" %)
24 |(% style="width:175px" %)分类字段|(% style="width:225px" %)数值字段
25 |(% style="width:175px" %)最多1个字段|(% style="width:225px" %)最多1个字段
yinshi 1.1 26
yinshi 3.1 27 ==== **【操作步骤】** ====
yinshi 1.1 28
29 **Step-1 选择组件，配置数据源**
30
31 创建报表，在左上角选择饼状图，然后选定数据源，如图：
32
33
34
35 **Step-2 选择图表展示字段**
36
37 将右边数据源中字段拖动放到**分类字段**、**数值字段**上
38
39 * (((
40 饼状图的数据源：
41
yinshi 6.1 42 有了分类字段和数值字段，就可以根据数据的实际情况，绘制出正确的饼状图。下图中：将分类字段拖入销售物品类型，数值字段拖入销售数量，则可以得出：【按照销售物品类型分类后的销售数量的统计饼状图】
yinshi 1.1 43
44
45 * (((
46 **分类字段：** 本字段表示数据的类别或分类，每个数据点都应该有一个对应的类别。类别字段可以是产品名称、地区名称、部门名称等，用于表示数据所属的具体类别。
47 )))
48 * (((
49 **数值字段：** 本字段表示每个类别的具体数值/数量。数值字段可以是销售额、销售数量、市场份额等，用于表示每个类别在总体中的比例或占比。
yinshi 6.1 50
yinshi 7.1 51 >
52
53 (((
yinshi 6.1 54 ====== 如果在数值字段（虚线框）中拖入非数值类型的字段（如：字符串、日期、地点类型），会根据默认聚合方式（计数），将字符串、日期、地点转化为该字段出现的次数 ======
yinshi 1.1 55 )))
yinshi 6.1 56
57 [[image:1729749814387-113.png||height="669" width="1300"]]
yinshi 1.1 58 )))
59 )))
60
61 **Step-3 样式设置**
62
yinshi 7.1 63 分为三小类：【基础设置】、【标签】，【图例】，如下图：
yinshi 1.1 64
yinshi 6.1 65 [[image:1729750188515-947.png||height="766" width="1425"]]
yinshi 1.1 66
67
yinshi 7.1 68 (((
69
yinshi 1.1 70 )))
yinshi 3.1 71
yinshi 7.1 72 (((
yinshi 3.1 73
yinshi 7.1 74
75
yinshi 1.1 76 )))
77
yinshi 3.1 78 ==== **【样式配置说明】** ====
yinshi 2.1 79
yinshi 1.1 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 )))