Skip to Content

文档更改5.8.2.2 Line Chart

由 liuqing01 于 2025/06/30 11:35 最后修改
从版本 16.5
由maym编辑
在2025/02/26 08:23上
修改评论： 该版本没有评论
到版本
由yinshi编辑
在2024/10/23 06:13上
修改评论： 该版本没有评论

摘要

细节

页面属性
标题
... ... @@ -1,1 +1,1 @@
1 -5.8.2.2 Line Chart
1 +5.8.2.2 折线图
父
... ... @@ -1,1 +1,1 @@
1 -Egret Cloud Operation manual.5\. 设计应用.5\.8 报表设计.5\.8\.2 报表设计器.WebHome
1 +Main.5\. 设计应用.5\.8 报表设计.5\.8\.2 报表设计器.WebHome
文档作者
... ... @@ -1,1 +1,1 @@
1 -XWiki.maym
1 +XWiki.yinshi
内容
... ... @@ -1,23 +1,10 @@
1 -==== **[Usage Scenario]** ====
1 +====== 【使用场景】 ======
2 2  
3 - A line chart is a commonly used type of chart to display changes over time. It connects data points with lines to show the trend of variables, and is suitable for the following scenarios:
3 +在折线图中，一般水平轴（X轴）用来表示时间的推移，并且间隔相同；而垂直轴（Y轴）代表不同时刻的数据的大小。如下图展示了随着时间推移，每月销售额的变化。
4 4  
5 -* (((
6 -**Time trend analysis:**  Line charts are suitable for displaying time series data, such as daily, monthly, or quarterly sales, user visits, or inventory changes, to help users identify long-term trends.
7 -)))
8 -* (((
9 -**Seasonal changes: ** By observing the fluctuations of the line, it is possible to analyze the periodic changes in the data. For example, seasonal fluctuations in sales revenue, changes in user activity during different time periods, etc.
10 -)))
11 -* (((
12 -**Comparison trend: ** Multiple lines can be used to compare the changes in multiple variables. For example, comparing sales trends of different products, or comparing user growth trends in different markets.
13 -)))
14 -* (((
15 -**Abnormal discovery: ** The prominent peaks or valleys in a line chart help identify abnormal situations in the data, such as an abnormal increase in sales or a sudden decrease in user churn in a certain month.
16 -)))
17 17  
18 -==== ====
19 19  
20 -==== **【功能简介】** ====
7 +====== 【功能简介】 ======
21 21  
22 22  折线图用于显示数据在一个**连续的时间间隔或者时间跨度上的变化**，它的特点是反映事物随时间或有序类别而变化的趋势。
23 23  
... ... @@ -66,6 +66,10 @@
66 66  )))
67 67  )))
68 68  
56 +
57 +
58 +
59 +
69 69  ====== 【基本要求】 ======
70 70  
71 71  要实现折线图的效果，基本要求如下 。
... ... @@ -76,13 +76,13 @@
76 76  
77 77  ====== ======
78 78  
79 -==== **【配置步骤】** ====
70 +====== 【配置步骤】 ======
80 80  
81 81  **Step-1 选择图形**
82 82  
83 83  创建报表，选择折线图，如图：
84 84  
85 -[[image:1737529051357-629.png]]
76 +[[image:1729663321225-837.png]]
86 86  
87 87  
88 88  **Step-2 选择图表展示字段**
... ... @@ -89,7 +89,7 @@
89 89  
90 90  将右边数据源列表中的字段拖动放到【横轴】、【纵轴】、【分组】、【参考线】上
91 91  
92 -[[image:1737528997085-860.png]]
83 +[[image:1729663922832-959.png]]
93 93  
94 94  
95 95  Step-3 样式设置
... ... @@ -99,201 +99,228 @@
99 99  [[image:1729663961688-819.png]]
100 100  
101 101  
93 +样式设置
102 102  
103 -==== **【样式配置说明】** ====
95 +样式设置
104 104  
105 -|(% colspan="1" rowspan="1" style="width:52px" %)(((
97 +|(% colspan="1" rowspan="1" %)(((
106 106  
107 -)))|(% colspan="1" rowspan="1" style="width:76.9844px" %)(((
99 +)))|(% colspan="1" rowspan="1" %)(((
108 108  样式设置分类
109 -)))|(% colspan="1" rowspan="1" style="width:94px" %)(((
101 +)))|(% colspan="1" rowspan="1" %)(((
110 110  配置项
111 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
103 +)))|(% colspan="1" rowspan="1" %)(((
112 112  用途
113 113  )))
114 -|(% colspan="1" rowspan="21" style="width:52px" %)(((
106 +|(% colspan="1" rowspan="29" %)(((
115 115  **折线图**
116 116  
117 117  
118 -)))|(% colspan="1" rowspan="12" style="width:76.9844px" %)(((
110 +)))|(% colspan="1" rowspan="14" %)(((
119 119  基础
120 120  
121 121  
122 -)))|(% colspan="1" rowspan="1" style="width:94px" %)(((
114 +)))|(% colspan="1" rowspan="1" %)(((
123 123  显示标题
124 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
125 -(((
126 -控制画布左上角的标题是否显示的开关
127 -
128 -[[image:1729664204675-778.png||height="214" width="731"]]
116 +)))|(% colspan="1" rowspan="1" %)(((
117 +默认开启
129 129  )))
130 -
131 -(((
132 -
133 -)))
134 -)))
135 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
119 +|(% colspan="1" rowspan="1" %)(((
136 136  标题名称
137 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)支持用户自定义报表标题
138 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
121 +)))|(% colspan="1" rowspan="1" %)(((
122 +默认输入：折线图
123 +)))
124 +|(% colspan="1" rowspan="1" %)(((
139 139  帮助文字
140 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)开启后，标题右侧出现小问号，鼠标悬浮时，出现帮助文字具体内容
141 -[[image:1729664436892-701.png]]
142 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
126 +)))|(% colspan="1" rowspan="1" %)(((
127 +默认关闭
128 +)))
129 +|(% colspan="1" rowspan="1" %)(((
143 143  帮助文字内容
144 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)支持用户自定义帮助文字的文案，例如“这是本月销售订单总额的统计”
145 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
131 +)))|(% colspan="1" rowspan="1" %)(((
132 +占位提示：请输入
133 +)))
134 +|(% colspan="1" rowspan="1" %)(((
146 146  折线图类型
147 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
148 -(((
149 -支持2种类型：折线、曲线
150 -[[image:1729664469432-978.png||height="398" width="875"]]
136 +)))|(% colspan="1" rowspan="1" %)(((
137 +默认选中“折线”
151 151  )))
152 -
153 -(((
139 +|(% colspan="1" rowspan="1" %)(((
140 +配色方案
141 +)))|(% colspan="1" rowspan="1" %)(((
154 154  
155 155  )))
144 +|(% colspan="1" rowspan="1" %)(((
145 +显示缩略轴
146 +)))|(% colspan="1" rowspan="1" %)(((
147 +默认关闭
156 156  )))
157 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
158 -配色方案
159 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
160 -支持用户自定义（多Y轴时）整体的配色方案
149 +|(% colspan="1" rowspan="1" %)(((
150 +启用导出
151 +)))|(% colspan="1" rowspan="1" %)(((
152 +默认打开
161 161  )))
162 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
163 -显示缩略轴
164 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)支持用户设置针对横轴的缩略轴，即：查看横轴上某一区间的数据
165 -[[image:1729664570038-223.png||height="477" width="822"]]
166 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
154 +|(% colspan="1" rowspan="1" %)(((
155 +导出格式
156 +)))|(% colspan="1" rowspan="1" %)(((
157 +同柱状图
158 +)))
159 +|(% colspan="1" rowspan="1" %)(((
167 167  展示点
168 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
169 -(((
161 +)))|(% colspan="1" rowspan="1" %)(((
170 170  默认打开，关闭后画布上不显示折线的每个描点
171 171  
164 +[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=YTAzNmM1ODI5MDQ3NGM2YmQ4N2IwZWEwNGZmM2M5YzJfNGJRMHprZHFYWTR2aUNEdFltUUZhTmdwdTlUNDFuNUZfVG9rZW46TjJndmJmQTBzb3dMdjd4R1lPb2NXU1p2blpSXzE3Mjk2NjQwMDc6MTcyOTY2NzYwN19WNA]]
172 172  
173 -[[image:1729736532720-382.png||height="441" width="866"]]
174 -)))
175 -
176 -(((
177 177  
178 178  )))
179 -)))
180 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
168 +|(% colspan="1" rowspan="1" %)(((
181 181  点大小
182 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
183 -控制折线图中点大小
184 -
185 -[[image:1729664677195-525.png||height="515" width="857"]]
170 +)))|(% colspan="1" rowspan="1" %)(((
171 +默认4，单位px（原型中隐藏了单位），选项：2,4,6,8,10
186 186  )))
187 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
173 +|(% colspan="1" rowspan="1" %)(((
188 188  展示线
189 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
190 -默认打开，关闭后折线的线段消失，只显示点（类似散点图）
175 +)))|(% colspan="1" rowspan="1" %)(((
176 +默认打开，关闭后，折线消失，只显示点（看上去像散点图）
191 191  
192 -[[image:1729664725301-778.png||height="403" width="937"]]
178 +[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=ODUzYzMyOTRiNWQ0MjE1Zjc4MjBlYmEyZGI2ODBiZTNfclNrNHl6eTRQZ3ZtSjR0b3ZYaUdaY0dvZDZ1V1FEOGhfVG9rZW46UUpsaGJia0Nab0hWWER4dWlwYWN4VUNnbmJoXzE3Mjk2NjQwMDc6MTcyOTY2NzYwN19WNA]]
193 193  
194 194  
195 195  )))
196 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
182 +|(% colspan="1" rowspan="1" %)(((
197 197  线粗细
198 198  
199 199  
200 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
201 -支持用户控制折线的线段粗细
186 +)))|(% colspan="1" rowspan="1" %)(((
187 +默认2，单位px（原型中隐藏了单位）选项：1,2,3,4,5,6
202 202  )))
203 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
189 +|(% colspan="1" rowspan="1" %)(((
204 204  填充
205 205  
206 206  
207 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
193 +)))|(% colspan="1" rowspan="1" %)(((
208 208  默认关闭， 打开后每个点向下填充半透明的颜色到X轴，效果如下：
209 209  
210 -[[image:1729664811246-731.png||height="276" width="683"]]
196 +[[image:https://quickegret.feishu.cn/space/api/box/stream/download/asynccode/?code=OTk2YmZjOGUzMjE1ODA4YjBmYzE3NzEwN2Y4MGZlZjVfQUgxUmVFdEN0M05Ycmg0NlJscWNmbGhySFJNUmlaUTlfVG9rZW46TXRueGJsV0NZb2hIYzF4cHZLZWNQS1RtblBnXzE3Mjk2NjQwMDc6MTcyOTY2NzYwN19WNA]]
211 211  
212 212  
213 213  )))
214 -|(% colspan="1" rowspan="5" style="width:76.9844px" %)(((
215 -横轴
200 +|(% colspan="1" rowspan="7" %)(((
201 +坐标轴-X轴
216 216  
217 217  
218 -)))|(% colspan="1" rowspan="1" style="width:94px" %)(((
204 +)))|(% colspan="1" rowspan="1" %)(((
219 219  显示轴标题
220 220  
221 221  
222 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
223 -开启后，画布中横轴下方，将显示用户配置的横轴的数据源的标题
224 -
225 -[[image:1737529012159-610.png]]
208 +)))|(% colspan="1" rowspan="1" %)(((
209 +默认开启
226 226  )))
227 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
228 -轴标题名称
211 +|(% colspan="1" rowspan="1" %)(((
212 +标题内容
229 229  
230 230  
231 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)支持用户自定义想要的轴标题名称文案
232 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
215 +)))|(% colspan="1" rowspan="1" %)(((
216 +显示轴标题开启后显示，这里没写标题文字的情况下，默认显示横/纵轴上第一个字段的名称
217 +)))
218 +|(% colspan="1" rowspan="1" %)(((
233 233  颜色字号
234 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)支持用户自定义轴标题的颜色和字号
235 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
220 +)))|(% colspan="1" rowspan="1" %)(((
221 +默认：黑色，12号字
222 +)))
223 +|(% colspan="1" rowspan="1" %)(((
236 236  轴标签
237 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
238 -控制是否显示轴标签的开关，如下图：
239 -
240 -[[image:1729737350555-287.png||height="438" width="900"]]
225 +)))|(% colspan="1" rowspan="1" %)(((
226 +默认开启
241 241  )))
242 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
228 +|(% colspan="1" rowspan="1" %)(((
229 +颜色字号
230 +)))|(% colspan="1" rowspan="1" %)(((
231 +默认：黑色，12号字
232 +)))
233 +|(% colspan="1" rowspan="1" %)(((
243 243  （轴标签）自动旋转
244 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
245 -轴标签会斜45°显示，如下图
246 -
247 -[[image:1729737429518-371.png]]
235 +)))|(% colspan="1" rowspan="1" %)(((
236 +默认勾选
248 248  )))
249 -|(% colspan="1" rowspan="4" style="width:76.9844px" %)(((
250 -纵轴
238 +|(% colspan="1" rowspan="1" %)(((
239 +
240 +)))|(% colspan="1" rowspan="1" %)(((
241 +
242 +)))
243 +|(% colspan="1" rowspan="8" %)(((
244 +坐标轴-Y轴
251 251  
252 252  
253 -)))|(% colspan="1" rowspan="1" style="width:94px" %)(((
247 +)))|(% colspan="1" rowspan="1" %)(((
254 254  显示轴标题
255 255  
256 256  
257 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
258 -开启后，画布中纵轴左侧，将显示用户配置的纵轴的（第一个数据源）的标题
251 +)))|(% colspan="1" rowspan="1" %)(((
252 +默认开启
259 259  
260 -（图中：“Y轴标题”是轴标题， “桌子、椅子、窗帘”是图例）
261 -
262 -[[image:1729737694678-922.png]]
254 +
263 263  )))
264 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
256 +|(% colspan="1" rowspan="1" %)(((
265 265  标题内容
266 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)支持用户自定义想要的轴标题名称文案
267 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
258 +)))|(% colspan="1" rowspan="1" %)(((
259 +显示轴标题开启后显示，这里没写标题文字的情况下，默认显示横/纵轴上第一个字段的名称
260 +)))
261 +|(% colspan="1" rowspan="1" %)(((
262 +颜色字号
263 +)))|(% colspan="1" rowspan="1" %)(((
264 +默认：黑色，12号字
265 +)))
266 +|(% colspan="1" rowspan="1" %)(((
268 268  轴标签
269 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
270 -控制Y轴轴标签是否显示的开关
271 -
272 -[[image:1729737826799-987.png||height="434" width="369"]]
268 +)))|(% colspan="1" rowspan="1" %)(((
269 +默认开启
273 273  )))
274 -|(% colspan="1" rowspan="1" style="width:94px" %)(((
271 +|(% colspan="1" rowspan="1" %)(((
272 +（轴标签）自动旋转
273 +)))|(% colspan="1" rowspan="1" %)(((
274 +默认勾选
275 +)))
276 +|(% colspan="1" rowspan="1" %)(((
277 +颜色字号
278 +)))|(% colspan="1" rowspan="1" %)(((
279 +默认：黑色，12号字
280 +)))
281 +|(% colspan="1" rowspan="1" %)(((
275 275  刻度数
276 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)支持用户配置的Y轴的刻度数（注意：这里的刻度数是一个预估值，报表引擎在渲染时可能会根据实际情况改变最终呈现的刻度数）
277 -|(% colspan="1" rowspan="1" style="width:52px" %)(((
283 +)))|(% colspan="1" rowspan="1" %)(((
284 +默认值：6， 即：标识Y轴默认有6个刻度
285 +)))
286 +|(% colspan="1" rowspan="1" %)(((
278 278  
279 -)))|(% colspan="1" rowspan="3" style="width:76.9844px" %)(((
288 +)))|(% colspan="1" rowspan="1" %)(((
289 +
290 +)))
291 +|(% colspan="1" rowspan="1" %)(((
292 +
293 +)))|(% colspan="1" rowspan="3" %)(((
280 280  图例
281 281  
282 282  
283 -)))|(% colspan="1" rowspan="1" style="width:94px" %)(((
297 +)))|(% colspan="1" rowspan="1" %)(((
284 284  显示图例
285 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)(((
286 -默认开启， 关闭后则不显示图例
287 -
288 -[[image:1729737941885-204.png||height="506" width="842"]]
299 +)))|(% colspan="1" rowspan="1" %)(((
300 +默认开启
289 289  )))
290 -|(% colspan="1" rowspan="1" style="width:52px" %)(((
302 +|(% colspan="1" rowspan="1" %)(((
291 291  
292 -)))|(% colspan="1" rowspan="1" style="width:94px" %)(((
304 +)))|(% colspan="1" rowspan="1" %)(((
293 293  图例位置
294 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)图例默认出现在画布的左上角，同时支持用户设置图例在画布中的位置
295 -|(% colspan="1" rowspan="1" style="width:52px" %)(((
306 +)))|(% colspan="1" rowspan="1" %)(((
307 +默认选中：左上角
308 +)))
309 +|(% colspan="1" rowspan="1" %)(((
296 296  
297 -)))|(% colspan="1" rowspan="1" style="width:94px" %)(((
311 +)))|(% colspan="1" rowspan="1" %)(((
298 298  颜色字号
299 -)))|(% colspan="1" rowspan="1" style="width:1272px" %)支持用户根据需要自行调整图例的文字颜色和字体大小
313 +)))|(% colspan="1" rowspan="1" %)(((
314 +默认：黑色，12号字
315 +
316 +（注意：这里指的是图例中文字Label的颜色和字号）
317 +)))
1729664204675-778.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -51.6 KB
内容
1729664436892-701.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -12.9 KB
内容
1729664469432-978.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -67.2 KB
内容
1729664570038-223.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -43.1 KB
内容
1729664677195-525.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -58.1 KB
内容
1729664725301-778.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -56.5 KB
内容
1729664811246-731.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -43.1 KB
内容
1729736532720-382.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -32.2 KB
内容
1729737237381-651.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -70.8 KB
内容
1729737350555-287.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -41.0 KB
内容
1729737429518-371.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -26.8 KB
内容
1729737694678-922.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -17.0 KB
内容
1729737826799-987.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -17.3 KB
内容
1729737941885-204.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -40.9 KB
内容
1737528997085-860.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -89.4 KB
内容
1737529012159-610.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -41.6 KB
内容
1737529051357-629.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.YufeiLi
大小
... ... @@ -1,1 +1,0 @@
1 -86.2 KB
内容