Skip to Content

Wiki源代码5.8.2.3 饼状图

由用户 yinshi 在 2024/10/24 07:23 保存的版本 9.1
显示最后作者
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
33
34 **Step-2 选择图表展示字段**
35
36 将右边数据源中字段拖动放到**分类字段**、**数值字段**上
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 |(% colspan="1" rowspan="1" %)(((
80
81 )))|(% colspan="1" rowspan="1" style="width:107px" %)(((
82 样式设置分类
83 )))|(% colspan="1" rowspan="1" style="width:150px" %)(((
84 配置项
85 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
86 用途
87 )))
88 |(% colspan="1" rowspan="15" %)(((
89 **饼状图**
90
91
92 )))|(% colspan="1" rowspan="6" style="width:107px" %)(((
93 基础设置
94
95
96 )))|(% colspan="1" rowspan="1" style="width:150px" %)(((
97 显示标题
98 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
99 控制画布左上角的标题是否显示的开关
100
101 [[image:1729754356435-491.png]]
102 )))
103 |(% colspan="1" rowspan="1" style="width:150px" %)(((
104 标题名称
105 )))|(% colspan="1" rowspan="1" style="width:1304px" %)支持用户自定义报表标题
106 |(% colspan="1" rowspan="1" style="width:150px" %)(((
107 帮助文字
108 )))|(% colspan="1" rowspan="1" style="width:1304px" %)开启后，标题右侧出现小问号，鼠标悬浮时，出现帮助文字具体内容
109 [[image:1729754478509-444.png]]
110 |(% colspan="1" rowspan="1" style="width:150px" %)(((
111 帮助文字内容
112 )))|(% colspan="1" rowspan="1" style="width:1304px" %)支持用户自定义帮助文字的文案，例如“本月销售总额统计”
113 |(% colspan="1" rowspan="1" style="width:150px" %)(((
114 饼状图类型
115 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
116 默认选中“常规”，第二选项：环形图，环形图效果如下：
117
118 [[image:1729754564047-207.png||height="451" width="1137"]]
119
120
121 )))
122 |(% colspan="1" rowspan="1" style="width:150px" %)(((
123 配色方案
124 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
125 支持用户自定义图形整体的配色方案
126 )))
127 |(% colspan="1" rowspan="6" style="width:107px" %)(((
128 标签
129
130
131 )))|(% colspan="1" rowspan="1" style="width:150px" %)(((
132 显示标签
133 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
134 默认开启
135 )))
136 |(% colspan="1" rowspan="1" style="width:150px" %)(((
137 颜色字号
138 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
139 默认：黑色，12号字
140 )))
141 |(% colspan="1" rowspan="1" style="width:150px" %)(((
142 连接线
143 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
144 默认开启
145 )))
146 |(% colspan="1" rowspan="1" style="width:150px" %)(((
147 标签位置
148
149
150 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
151 内部，外部，蜘蛛图
152
153 标签在内部的样式示例：
154
155
156 标签为住蜘蛛图示例：
157
158
159
160 )))
161 |(% colspan="1" rowspan="1" style="width:150px" %)(((
162 标签内容
163
164
165 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
166 是标题、百分比、值的各种排列组合，默认选择【标题，百分比】如下：
167
168
169
170 )))
171 |(% colspan="1" rowspan="1" style="width:150px" %)(((
172 百分比小数位数
173 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
174 默认是2。
175
176
177
178 )))
179 |(% colspan="1" rowspan="3" style="width:107px" %)(((
180 图例
181 )))|(% colspan="1" rowspan="1" style="width:150px" %)(((
182 显示图例
183 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
184 默认开启
185 )))
186 |(% colspan="1" rowspan="1" style="width:150px" %)(((
187 图例位置
188 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
189 默认选中：左上角。
190
191 注意：如果用户选中3点或9点这两个位置的时候， 图例需要**纵向**排列（如下图），其余位置是横向排列的。
192
193
194
195 )))
196 |(% colspan="1" rowspan="1" style="width:150px" %)(((
197 颜色字号
198 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
199 默认：黑色，12号字
200 )))