Skip to Content

Wiki源代码5.8.2.3 饼状图

由用户 yufei li 在 2025/02/14 02:14 保存的版本 13.2
显示最后作者
1 ==== **【使用场景】** ====
2
3 饼状图是一种常用的数据可视化图表类型，它将数据呈现为一个类似于饼状的圆形，将不同数据分类的比例以扇形的方式展示出来，适用于以下一些场景：
4
5 * (((
6 **比例展示**： 饼状图适合展示不同类别在总体中的比例或占比关系。比如，市场份额、各种支出占总支出的比例等。
7 )))
8 * (((
9 **分类展示**： 饼状图可以将数据按照不同的类别进行分类展示，直观地展示各个类别之间的比较。比如，不同产品的销售比例、不同地区的销售占比等。
10 )))
11 * (((
12 **趋势分析**： 通过观察饼状图中各个扇形的大小变化，可以分析数据的趋势和变化情况。比如，销售额的季节性变化、不同年龄段用户的占比变化等。
13 )))
14 * (((
15 **重点突出**： 可以通过突出饼状图中某个扇形或几个重要的扇形，来强调特定的数据或类别。比如，突出某个产品的市场份额、突出某个地区的销售占比等。
16 )))
17
18 ==== **【基本要求】** ====
19
20 饼图的基本要求如下：
21
22 (% style="width:402px" %)
23 |(% style="width:175px" %)分类字段|(% style="width:225px" %)数值字段
24 |(% style="width:175px" %)最多1个字段|(% style="width:225px" %)最多1个字段
25
26 ==== **【操作步骤】** ====
27
28 **Step-1 选择组件，配置数据源**
29
30 创建报表，在左上角选择饼状图，然后选定数据源，如图：
31
32 [[image:1729843622506-386.png||height="546" width="767"]]
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" style="width:107px" %)(((
83 样式设置分类
84 )))|(% colspan="1" rowspan="1" style="width:150px" %)(((
85 配置项
86 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
87 用途
88 )))
89 |(% colspan="1" rowspan="14" %)(((
90 **饼状图**
91
92
93 )))|(% colspan="1" rowspan="6" style="width:107px" %)(((
94 基础设置
95
96
97 )))|(% colspan="1" rowspan="1" style="width:150px" %)(((
98 显示标题
99 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
100 控制画布左上角的标题是否显示的开关
101
102 [[image:1729754356435-491.png]]
103 )))
104 |(% colspan="1" rowspan="1" style="width:150px" %)(((
105 标题名称
106 )))|(% colspan="1" rowspan="1" style="width:1304px" %)支持用户自定义报表标题
107 |(% colspan="1" rowspan="1" style="width:150px" %)(((
108 帮助文字
109 )))|(% colspan="1" rowspan="1" style="width:1304px" %)开启后，标题右侧出现小问号，鼠标悬浮时，出现帮助文字具体内容
110 [[image:1729754478509-444.png]]
111 |(% colspan="1" rowspan="1" style="width:150px" %)(((
112 帮助文字内容
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" %)(((
117 默认选中“常规”，第二选项：环形图，环形图效果如下：
118
119 [[image:1729754564047-207.png||height="451" width="1137"]]
120
121
122 )))
123 |(% colspan="1" rowspan="1" style="width:150px" %)(((
124 配色方案
125 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
126 支持用户自定义图形整体的配色方案
127 )))
128 |(% colspan="1" rowspan="5" style="width:107px" %)(((
129 标签
130
131
132 )))|(% colspan="1" rowspan="1" style="width:150px" %)(((
133 显示标签
134 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
135 (((
136 控制是否显示标签的开关，如下图：
137
138 [[image:1729754768467-631.png||height="523" width="1081"]]
139 )))
140
141 (((
142
143 )))
144 )))
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" %)(((
151 标签位置
152
153
154 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
155 支持3种模式：内部，外部，蜘蛛图
156 )))
157 |(% colspan="1" rowspan="1" style="width:150px" %)(((
158 标签内容
159
160
161 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
162 是标题、百分比、值的各种排列组合，默认选择【标题，百分比】如下，用户也可以改成其他内容，例如“标题，值（百分比）”，如下图：
163
164 [[image:1729756074259-175.png]]
165
166
167 )))
168 |(% colspan="1" rowspan="1" style="width:150px" %)(((
169 百分比小数位数
170 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
171 设置上述标签内容中，百分比的小数位数，例如设置成显示3位小数，如下图：
172
173 [[image:1729756197988-684.png]]
174
175
176
177 )))
178 |(% colspan="1" rowspan="3" style="width:107px" %)(((
179 图例
180 )))|(% colspan="1" rowspan="1" style="width:150px" %)(((
181 显示图例
182 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
183 默认开启， 如下图：
184
185 [[image:1729756246566-930.png]]
186 )))
187 |(% colspan="1" rowspan="1" style="width:150px" %)(((
188 图例位置
189 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
190 图例默认出现在画布的左上角，同时支持用户设置图例在画布中的位置
191
192
193
194 )))
195 |(% colspan="1" rowspan="1" style="width:150px" %)(((
196 颜色字号
197 )))|(% colspan="1" rowspan="1" style="width:1304px" %)支持用户根据需要自行调整图例的文字颜色和字体大小