双Y轴柱线图组件以柱状图和折线图结合的形式将复杂的数据直观地展示出来。本文介绍双Y轴柱线图组件详细配置方法。

应用示例

如下图所示,使用双Y轴柱线图直观地展示产品的库存量和订购量。

双Y轴柱线图示例

步骤一:添加组件

  1. 创建Web应用。具体操作,请参见创建Web应用
  2. 在Web应用编辑器中,单击最左侧的组件图标组件
  3. 在画布左侧组件列表上方,在搜索框中输入双Y轴柱线图找到该组件,然后将组件拖拽到中间画布。

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

    双Y轴柱线图

步骤二:配置数据源

  1. 在Web编辑器中,选中组件,在右侧样式中单击配置数据源
  2. 数据源配置页面,选择数据源类型,完成配置。
    可选数据类型有接口数据表资源静态数据应用推送
  3. 单击确定
    数据展示页签左侧数据源显示已配置的数据源名称,维度度量显示从数据源中自动解析的属性字段。
    说明 数据源属性字段匹配规则:
    • 维度:布尔型、字符型、时间型字段。
    • 度量:数值型字段。
  4. 可选:单击左上角数据表,查看已配置数据源的所有数据信息。

步骤三:配置数据展示

数据展示页签,设置双Y轴柱线图展示数据和样式,如图所示。

双Y轴柱线图数据展示
  1. 根据实际需求,分别拖拽维度下的字段到横轴,度量下的字段到左纵轴(柱)右纵轴(线)框中。
    说明 系统默认颜色请在数据展示页面右侧属性页签或样式页签下进行修改。
  2. 在横轴、左纵轴(柱)和右纵轴(线)框,单击字段三角入口,执行以下操作。
    操作项说明
    汇总方式可选:总和(默认值)、平均值、最大值、最小值、计数。

    仅度量字段支持该功能。字段前会显示已设置的汇总方式。

    设置度量字段汇总方式后,支持再次配置过滤筛选条件,展示特定数据。

    说明 只有当组件数据源类型为数据表资源时,才支持该功能。
    筛选器添加字段到筛选器,作为筛选项根据该字段配置条件过滤展示数据。最多支持添加10个筛选器。

    您也可从左侧维度或度量中,单击字段三角入口,添加字段到筛选器

    说明 只有当组件数据源类型为数据表资源时,才支持该功能。 更多信息,请参见筛选器配置
    设置显示名编辑字段的显示名称。
  3. 数据展示页签右侧,单击样式,设置组件展示样式。
    配置项说明
    柱线图样式设置柱线图是否使用平滑曲线、是否显示填充区域、折线粗细。
    说明 柱线图折线粗细的设置范围为0~10。
    标题设置是否显示对应配置项,如果显示,则可设置相应的显示效果。
    图例
    横轴
    左纵轴
    右纵轴
    背景
    边框
  4. 在页面右上角单击完成配置,返回Web应用编辑器,查看已配置的组件数据。
  5. 调整组件在页面中的最终位置。有关组件通用样式配置的更多信息,请参见样式配置

步骤四:配置交互动作

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

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

    具体操作,请参见交互配置

  2. 单击页面右上方的预览,预览和调试组件展示的数据和效果。