跳到主要内容

柱状图

适用场景#

用于报表场景下展示数据之间大小的对比。

使用说明#

进入应用编辑器页面,将图表组件 > 柱状图组件拖进相应容器即可。

属性#

组件接收的外部传入的属性

属性名
属性标识
类型
属性分组
默认值
说明
柱形图方向directionType{"label":"横向","value":"crosswise"}|{"label":"纵向","value":"lengthways"}基础属性"lengthways"支持横向和纵向。纵向维度为 X 轴,数值为 Y 轴,横向反之。本文属性设置以纵向为例
是否堆叠isPileboolean基础属性false多Y轴时,该属性才生效
显示标题isTitleboolean基础属性true-
图表标题titlestring基础属性"柱状图标题"-
数据源dataSourceType{"label":"数据模型","value":"data-model"}|{"label":"APIs","value":"custom-connector"}|{"label":"变量","value":"variable"}基础属性"data-model"数据源类型选择
数据模型dataModelobject基础属性-展示模型数据的数据来源
APIsconnectorobject基础属性-展示数据的APIs来源选择
调用方法connectorMethodobject基础属性-展示数据的APIs调用方法选择
查询入参connectorParamsstring基础属性-对APIs调用方法获取的数据进行筛选过滤。支持对象类型,例如 {name:'',value:''}
数据筛选filterData-基础属性-可配置数据取值范围,可参见 数据筛选配置
配色setColorarray基础属性["#2A70E2","#46B690","#EDB539","#E46961","#4FB3D2","#805FDC"]当有多个数值字段或维度字段分组时,不同类别将按照不同配色展示,支持自定义色卡
字段选择xFieldobject基础属性-X轴数值字段选择
统计维度xStatisticsstring基础属性--
显示空值坐标xIsCountEmptyboolean基础属性false-
字段选择yFieldobject基础属性-Y轴数值字段选择
分组groupKeyobject基础属性-当 Y 轴仅选择一个字段时,支持根据某一固定字段对 X 轴进行分组展示。示例:X 轴为销售人员,分组为销售区域
分组维度groupKeyTimeSpanstring基础属性--
显示图例isLegendboolean基础属性true-
图例位置legend{"value":"top","label":"上方"}|{"value":"bottom","label":"下方"}基础属性"bottom"-
显示坐标轴名称isXaxisNameboolean基础属性true-
名称xAxisNamestring基础属性""-
显示标签isXaxisAxisLabelShowboolean基础属性true-
显示X轴刻度线isXaxisAxisTickShowboolean基础属性true-
文字自动倾斜isXaxisAxisLabelRotateboolean基础属性false-
显示网格线isYAxisSplitlineLinestyleWidthboolean基础属性true-
网格线线条yAxisSplitlineLinestyleType{"value":"solid","label":"实线"}|{"value":"dashed","label":"虚线"}|{"value":"dotted","label":"点线"}基础属性"solid"-
最大值yAxisMaxnumber基础属性--
最小值yAxisMinnumber基础属性--
显示Y轴名称isYAxisNameboolean基础属性true-
名称yAxisNamestring基础属性""-
显示数值isYAxisShowboolean基础属性true数值(Y轴)显示数值
显示数值isSeriesShowSymbolboolean基础属性true数据标签显示数值
显示单位isUnitboolean基础属性false-
数值量级unit{"label":"个","value":1}|{"label":"十","value":10}|{"label":"百","value":100}|{"label":"千","value":1000}|{"label":"万","value":10000}|{"label":"十万","value":100000}|{"label":"百万","value":1000000}|{"label":"千万","value":10000000}|{"label":"亿","value":100000000}基础属性1-
小数位数decimalDigitsnumber基础属性0-
后缀suffixstring基础属性""-

事件#

进阶属性#

支持配置坐标轴样式、数据标签和显示单位等属性。

  • 显示单位:数值量级支持 个/十/百/千/万/十万/百万/千万/亿
  • 小数位数:支持设置 0-10 位小数。
  • 后缀:支持自定义。默认根据数量级生成 -/十/百/千/万/十万/百万/千万/亿

APIs 使用场景#

当数据源配置时选择 APIs,需用户自行在 APIs 内按照参数结构定义数据,才可正常在统计卡片组件内渲染,详情请参见 图表组件参数定义

?当使用 APIs 时,数据筛选、字段选择、统计方式、统计空值属性均需用户在所建 APIs 内自行定义,其他属性与数据模型使用场景配置保持一致。

使用示例#

下列示例数据源为销售业绩表。示例数据配置如下表所示。更多数据配置操作请参见 数据模型

销售姓名客户地区销售总额销售单数性别
张三北京10000003
赵四北京20000002
赵四上海1000001
王五上海2000001
王五深圳5000001
李六北京50000006
李六深圳2000001

示例 1:各销售人员的销售总业绩对比(纵向)#

  1. 新建柱状图组件,进入右侧属性 > 基础属性页面,单击数据源下拉菜单,选择销售业绩表并选择统计方法。

  2. 维度(X 轴)单击字段选择下拉菜单,选择销售姓名

  3. 数值(Y 轴)下,单击添加 Y 轴字段字段类型选择销售总额关系类型选择求和

  4. 下拉右侧属性,进入进阶属性内单击开启显示单位。单击数量值级下拉菜单设置为后缀项设置为万。

  5. 根据需要修改标题、坐标轴样式、图例样式等属性,最终效果如下图展示:

示例 2:各销售人员的销售总业绩对比(纵向)- 按照地区对比#

在 [示例 1]的配置基础上,增加分组字段,单击分组下拉菜单,选择客户地区

最终效果展示:

单击开启是否堆叠功能,可查看堆叠效果:

示例 3:各销售人员的销售总业绩对比(纵向)- 仅查看性别为男的数据#

  1. 在 [示例 1]的配置基础上,单击数据筛选

  2. 设置相应数据筛选参数,单击确定增加筛选条件。

示例 4:各销售人员的"客户覆盖地区数"对比和"总销售单数"对比(横向)#

  1. 柱形图方向单击选择横向

  2. 维度(Y 轴)单击字段选择下拉菜单,选择销售姓名

  3. 数值(X 轴)下,单击添加字段。添加以下两个字段:

  • 字段 1:客户地区;统计方式:计数
  • 字段 2:销售单数;统计方式:求和
  1. 最终效果展示:

限制说明#

维度轴不支持设置时间类型,可设置日期类型和日期时间类型。