跳到主要内容

折线图

用于显示一组数据的发展趋势

何时使用​

主要使用在表示发展趋势的场景，将一段时间内的走势进行展现

  • 分析产品使用人数
  • 分析学生成绩走势
  • 分析温度随月份的趋势
  • 分析人口发展趋势，人口数量随着年份变化
  • 分析GDP发展和房地产之间的关系

一、属性​

1.数据源​

数据源绑定方式详见数据绑定

2. 标题​

image-20250604140256571

2.1 标题​

可以设置折线图的标题，比如汽车销售数据

2.2 子标题​

可以设置折线图的子标题，比如月度数据

2.3 标题位置​

可以设置折线图标题位置，可以采用预设和手动赋值两种方式。这里将使用下方中间的预设位置.

image-20250604140320007

采用手动赋值的方式的话则需要设置到顶部，左侧的距离。

image-20250604140337752

3. x轴​

x轴首先需要绑定数据列，比如日期，然后设置数据显示的标题,标题位置、轴线、刻度线、网格线、边界间隙等显示效果

image-20250604140451935

4. y轴​

y轴设置显示的指标，比如数量，而且可以设置多种指标进行对比，比如注册数量和登录数量，然后同样可以设置标题、轴线、刻度线、网格线、以及设置y轴显示的最小值和最大值

image-20250604140827058

image-20250604140902947

5. 外观​

外观可以设置整个图标的高度、宽度，以及形状,颜色等

image-20250604141237358

image-20250604141354024

6. 图例​

可以设置图例是否显示，以及显示的形状，大小等属性。

image-20250604141607005

image-20250604141700730

7.标签​

标签样式及折线图上每个节点的节点的值的样式，可以决定是否显示，设置位置，大小属性

image-20250604142020154

image-20250604142039431

8.提示框​

提示框及鼠标移动到折线图上是否弹框显示数值等提示，可以设置开启关闭，文字大小和颜色属性

image-20250604142240010

image-20250604142257913

9.预设颜色列表​

可以设置折线图中的线条的颜色

image-20250604142627328

image-20250604142642793

10.状态​

可以选择是否隐藏该组件，隐藏之后页面将不再显示该组件。

二、规则​

1. 表单校验​

2. 显示控制​

三、样式​

详见通用样式

四、常见使用场景​

==1.显示登录用户注册登录趋势==

LineChart01

==2.显示成绩走势==

LineChart02

==3.温度趋势图==

LineChart03