Skip to Content

Wiki源代码5.8.2.3 饼状图

由用户 yinshi 在 2024/10/24 06:00 保存的版本 5.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
19
20
yinshi 3.1 21 ==== **【基本要求】** ====
yinshi 1.1 22
23 饼图的基本要求如下：
24
yinshi 5.1 25 (% style="width:402px" %)
26 |(% style="width:175px" %)分类字段|(% style="width:225px" %)数值字段
27 |(% style="width:175px" %)最多1个字段|(% style="width:225px" %)最多1个字段
yinshi 1.1 28
yinshi 3.1 29 ==== **【操作步骤】** ====
yinshi 1.1 30
31 **Step-1 选择组件，配置数据源**
32
33 创建报表，在左上角选择饼状图，然后选定数据源，如图：
34
35 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=ZmE3ZmIwYWQ1YWVmM2Q1YTJlNWQyMTNkMmJlNmQ5YjBfWW1ZdUNIakpwM1dFbW1GSjc4OFZ0U2RVS29pR3oxbXhfVG9rZW46WWRKV2JYMU1Ob0doZE14d0I0MmN6ekh4bkFjXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
36
37
38 **Step-2 选择图表展示字段**
39
40 将右边数据源中字段拖动放到**分类字段**、**数值字段**上
41
42 * (((
43 饼状图的数据源：
44
45 如果在数值字段（虚线框）中拖入非数值类型的字段（如：字符串、日期、地点类型）：
46
47 会根据默认聚合方式（计数），将字符串、日期、地点转化为该字段出现的次数，作为实际的取值，传给报表引擎
48
49 有了分类字段和数值字段，就可以根据数据的实际情况，绘制出正确的饼状图。下图中：将分类字段拖入销售物品类型，数值字段拖入销售收入，则可以得出：【按照销售物品类型分类后的销售收入饼状图】
50
51 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=YjgyYjYyOGU4ZTQ2NjM2MWNlN2RhMjNjY2Y5MTc2YzRfQWROaE9QRDRCQ3h1bW9FUEh5T3owWDF5Y3RqSEp0bWhfVG9rZW46QlJ2amJZOFgyb2REbjd4VDlPQmNUS3FCbnVmXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
52
53 注意：**分类字段**、**数值字段，都不能通过公式编辑器生成**
54
55 * (((
56 **分类字段：** 本字段表示数据的类别或分类，每个数据点都应该有一个对应的类别。类别字段可以是产品名称、地区名称、部门名称等，用于表示数据所属的具体类别。
57 )))
58 * (((
59 **数值字段：** 本字段表示每个类别的具体数值/数量。数值字段可以是销售额、销售数量、市场份额等，用于表示每个类别在总体中的比例或占比。
60 )))
61 )))
62 * (((
63 条件过滤：支持
64 )))
65
66 **Step-3 样式设置**
67
68 分为三小类：【基础】、【标签】，【图例】，如下图：
69
70 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=NTIyOTAxYWRlODIzZjRmZWY1N2VjNjY4YmMyMTc5ZTFfaFh4bHFGUm5TS1l1ZE1UZUNUalJFanJDaU1hMnQzT3pfVG9rZW46TVR0MGJteUpnb29xcEd4U0owOWNkN1VMbjNlXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
71
72
73 * (((
74 支持调整饼图的颜色、尺寸
75 )))
76 * (((
77 基础饼图变环形图
78 )))
79 * (((
80 调整环形图的内半径
yinshi 3.1 81
82
yinshi 1.1 83 )))
84
yinshi 3.1 85 ==== **【样式配置说明】** ====
yinshi 2.1 86
yinshi 1.1 87 |(% colspan="1" rowspan="1" %)(((
88
89 )))|(% colspan="1" rowspan="1" %)(((
90 样式设置分类
91 )))|(% colspan="1" rowspan="1" %)(((
92 配置项
93 )))|(% colspan="1" rowspan="1" %)(((
94 形态
95 )))|(% colspan="1" rowspan="1" %)(((
96
97 )))
98 |(% colspan="1" rowspan="18" %)(((
99 **饼状图**
100
101
102 )))|(% colspan="1" rowspan="9" %)(((
103 基础
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 |(% colspan="1" rowspan="1" %)(((
135 折线图类型
136 )))|(% colspan="1" rowspan="1" %)(((
137 选项卡
138 )))|(% colspan="1" rowspan="1" %)(((
139 默认选中“常规”，第二选项：环形图，环形图效果如下：
140
141 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=NTJjYWU5ZjE3Njc4MTk1MmE2NzhkZDYwMWExMjA4MDdfWnlaZEkxeDVHQVpMdnBCaW1JaUdSTGhISUYyaGxGaXpfVG9rZW46VFFHQWJBUXJTb0J3MGN4ektyMWNINVlvbkVlXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
142
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="1" %)(((
167
168 )))|(% colspan="1" rowspan="1" %)(((
169
170 )))|(% colspan="1" rowspan="1" %)(((
171
172 )))
173 |(% colspan="1" rowspan="6" %)(((
174 标签
175
176
177 )))|(% colspan="1" rowspan="1" %)(((
178 显示标签
179 )))|(% colspan="1" rowspan="1" %)(((
180 开关
181 )))|(% colspan="1" rowspan="1" %)(((
182 默认开启
183 )))
184 |(% colspan="1" rowspan="1" %)(((
185 颜色字号
186 )))|(% colspan="1" rowspan="1" %)(((
187 拾色器+下拉
188 )))|(% colspan="1" rowspan="1" %)(((
189 默认：黑色，12号字
190 )))
191 |(% colspan="1" rowspan="1" %)(((
192 连接线
193 )))|(% colspan="1" rowspan="1" %)(((
194 开关
195 )))|(% colspan="1" rowspan="1" %)(((
196 默认开启
197 )))
198 |(% colspan="1" rowspan="1" %)(((
199 标签位置
200
201
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
216 )))
217 |(% colspan="1" rowspan="1" %)(((
218 标签内容
219
220
221 )))|(% colspan="1" rowspan="1" %)(((
222 下拉
223
224
225 )))|(% colspan="1" rowspan="1" %)(((
226 是标题、百分比、值的各种排列组合，默认选择【标题，百分比】如下：
227
228 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=M2FiYWI0ZDIyZGFiNzM0NGEyNTgwOTI2NGU2OWVjY2RfU292b0x5eFQxMFZwR2xHazc2YUwxNU5Eb2E4TXplTjFfVG9rZW46T2VVcWJpMXZ0b3ZOVjZ4TGJCZGNpV3BibnloXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
229
230
231 )))
232 |(% colspan="1" rowspan="1" %)(((
233 百分比小数位数
234 )))|(% colspan="1" rowspan="1" %)(((
235 下拉选择
236 )))|(% colspan="1" rowspan="1" %)(((
237 默认是2。
238
239 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=YmFkMjkzNTY2ZmIxOGY5MmFhNmM4OTRiZGQzMWQxYzVfUzhNTW44d1VBM3FSeERmeHgyYVNHYVk4RVhpSGJvblhfVG9rZW46WGhOUmI1VHRtb1BNWTB4cHJxOWNIbFZjbkxoXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
240
241
242 )))
243 |(% colspan="1" rowspan="3" %)(((
244 图例
245 )))|(% colspan="1" rowspan="1" %)(((
246 显示图例
247 )))|(% colspan="1" rowspan="1" %)(((
248 开关
249 )))|(% colspan="1" rowspan="1" %)(((
250 默认开启
251 )))
252 |(% colspan="1" rowspan="1" %)(((
253 图例位置
254 )))|(% colspan="1" rowspan="1" %)(((
255 八宫格
256 )))|(% colspan="1" rowspan="1" %)(((
257 默认选中：左上角。
258
259 注意：如果用户选中3点或9点这两个位置的时候， 图例需要**纵向**排列（如下图），其余位置是横向排列的。
260
261 [[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=MDFmOWViNzA5NjkzYzZhYjkzMDlkYTNmZTA0NDA1M2FfT2JpNFBwR2tDRTBBTGtGSVRYS2IxT2VjVzVsM2ZSc0FfVG9rZW46RjhHZGJaejlhbzUxV2Z4OEZwRmNsM1Iwbm1lXzE3Mjk3MzgxMDg6MTcyOTc0MTcwOF9WNA]]
262
263
264 )))
265 |(% colspan="1" rowspan="1" %)(((
266 颜色字号
267 )))|(% colspan="1" rowspan="1" %)(((
268 拾色器+下拉
269 )))|(% colspan="1" rowspan="1" %)(((
270 默认：黑色，12号字
271 )))