折线图

应用示例

在茶园的环境监控大屏中，使用折线图组件展示每小时的最高温度数据。

步骤一：添加组件

1. 创建Web应用。具体操作，请参见创建Web应用。

2. 在Web应用编辑器中，单击最左侧的组件图标。

3. 在画布左侧组件列表上方，输入折线图，找到该组件，然后将组件拖拽到中间画布。

   有关组件添加的更多信息，请参见添加组件。

   

步骤二：配置数据源

1. 在Web编辑器中，选中组件，在右侧样式中单击配置数据源。

2. 在数据源配置页面，选择数据源类型，完成配置。

   可选数据类型有接口、数据表资源、静态数据、应用推送。

3. 单击确定。

   数据展示页签左侧数据源显示已配置的数据源名称，维度和度量显示从数据源中自动解析的属性字段。

   说明

   数据源属性字段匹配规则：

   • 维度：布尔型、字符型、时间型字段。

   • 度量：数值型字段。

4. 可选：单击左上角数据表，查看已配置数据源的所有数据信息。

步骤三：配置数据展示

在数据展示页签，设置折线图展示数据和样式，如图所示。

1. 根据实际需求，分别拖拽一个维度字段和多个度量字段到横轴和纵轴。

   说明

   系统默认颜色请在数据展示页面右侧属性页签或样式页签下进行修改。

2. 可选：在横轴和纵轴框，单击字段三角入口，执行以下操作。

   

   操作项	说明
   汇总方式	可选：总和（默认值）、平均值、最大值、最小值、计数。 仅度量字段支持该功能。字段前会显示已设置的汇总方式。 设置度量字段汇总方式后，支持再次配置过滤筛选条件，展示特定数据。 说明 只有当组件数据源类型为数据表资源时，才支持该功能。
   筛选器	添加字段到筛选器，作为筛选项根据该字段配置条件过滤展示数据。最多支持添加10个筛选器。 您也可从左侧维度或度量中，单击字段三角入口，添加字段到筛选器。 说明 只有当组件数据源类型为数据表资源时，才支持该功能。 更多信息，请参见筛选器配置。
   设置显示名	编辑字段的显示名称。

3. 在数据展示页签右侧，单击样式，设置组件展示样式。

   配置项	说明
   全局样式	设置全局样式效果：字体、是否显示数据点、是否使用平滑曲线、是否设置面积填充，是否使用断点连线。
   标题	设置是否显示标题或图例标志。如果显示，可设置相应的显示样式。
   图例
   X轴	设置是否显示X或Y轴刻度值。如果显示，可设置相应的显示样式。 说明 Y轴刻度数量从最小值所在刻度算起，例如最小值为0，最大值为500，间隔为50，刻度数量为11。
   Y轴
   标签	设置是否显示组件的Y轴数据点具体数值、背景网格线、背景颜色和边框 。如果显示，可设置相应的显示样式。
   横向网格线
   背景
   边框
   卡片背景	设置鼠标指针悬浮到图表上时，显示的数据卡片是否有背景样式。 如果不显示，数据卡片使用默认样式。 如果显示，可设置数据卡片背景的样式。
   无数据提示	设置是否显示无数据提示。如果显示，可设置显示的样式。

4. 单击完成配置，返回Web应用编辑器，查看已配置的组件数据。

5. 调整组件在页面中的最终位置。有关组件通用样式配置的更多信息，请参见样式配置。

步骤四：配置交互动作

1. 在Web应用编辑器右侧交互中，单击新增交互，设置事件和动作。

   该组件支持鼠标移入事件。例如，鼠标移入，执行动作展示隐藏，显示某个隐藏的组件，展示组件数据更多的说明信息。

   具体操作，请参见交互配置。

2. 单击页面右上方的预览，预览和调试组件展示的数据和样式。