Skip to Content

文档更改5.8.2.2 Line Chart

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

摘要

细节

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