柱状图
#
适用场景用于报表场景下展示数据之间大小的对比。

#
使用说明进入应用编辑器页面,将图表组件 > 柱状图组件拖进相应容器即可。
#
属性组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
---|
柱形图方向 | directionType | {"label":"横向","value":"crosswise"}|{"label":"纵向","value":"lengthways"} | 基础属性 | "lengthways" | 支持横向和纵向。纵向维度为 X 轴,数值为 Y 轴,横向反之。本文属性设置以纵向为例 |
是否堆叠 | isPile | boolean | 基础属性 | false | 多Y轴时,该属性才生效 |
显示标题 | isTitle | boolean | 基础属性 | true | - |
图表标题 | title | string | 基础属性 | "柱状图标题" | - |
数据源 | dataSourceType | {"label":"数据模型","value":"data-model"}|{"label":"APIs","value":"custom-connector"}|{"label":"变量","value":"variable"} | 基础属性 | "data-model" | 数据源类型选择 |
数据模型 | dataModel | object | 基础属性 | - | 展示模型数据的数据来源 |
APIs | connector | object | 基础属性 | - | 展示数据的APIs来源选择 |
调用方法 | connectorMethod | object | 基础属性 | - | 展示数据的APIs调用方法选择 |
查询入参 | connectorParams | string | 基础属性 | - | 对APIs调用方法获取的数据进行筛选过滤。支持对象类型,例如 {name:'',value:''} |
数据筛选 | filterData | - | 基础属性 | - | 可配置数据取值范围,可参见 数据筛选配置 |
配色 | setColor | array | 基础属性 | ["#2A70E2","#46B690","#EDB539","#E46961","#4FB3D2","#805FDC"] | 当有多个数值字段或维度字段分组时,不同类别将按照不同配色展示,支持自定义色卡 |
字段选择 | xField | object | 基础属性 | - | X轴数值字段选择 |
统计维度 | xStatistics | string | 基础属性 | - | - |
显示空值坐标 | xIsCountEmpty | boolean | 基础属性 | false | - |
字段选择 | yField | object | 基础属性 | - | Y轴数值字段选择 |
分组 | groupKey | object | 基础属性 | - | 当 Y 轴仅选择一个字段时,支持根据某一固定字段对 X 轴进行分组展示。示例:X 轴为销售人员,分组为销售区域 |
分组维度 | groupKeyTimeSpan | string | 基础属性 | - | - |
显示图例 | isLegend | boolean | 基础属性 | true | - |
图例位置 | legend | {"value":"top","label":"上方"}|{"value":"bottom","label":"下方"} | 基础属性 | "bottom" | - |
显示坐标轴名称 | isXaxisName | boolean | 基础属性 | true | - |
名称 | xAxisName | string | 基础属性 | "" | - |
显示标签 | isXaxisAxisLabelShow | boolean | 基础属性 | true | - |
显示X轴刻度线 | isXaxisAxisTickShow | boolean | 基础属性 | true | - |
文字自动倾斜 | isXaxisAxisLabelRotate | boolean | 基础属性 | false | - |
显示网格线 | isYAxisSplitlineLinestyleWidth | boolean | 基础属性 | true | - |
网格线线条 | yAxisSplitlineLinestyleType | {"value":"solid","label":"实线"}|{"value":"dashed","label":"虚线"}|{"value":"dotted","label":"点线"} | 基础属性 | "solid" | - |
最大值 | yAxisMax | number | 基础属性 | - | - |
最小值 | yAxisMin | number | 基础属性 | - | - |
显示Y轴名称 | isYAxisName | boolean | 基础属性 | true | - |
名称 | yAxisName | string | 基础属性 | "" | - |
显示数值 | isYAxisShow | boolean | 基础属性 | true | 数值(Y轴)显示数值 |
显示数值 | isSeriesShowSymbol | boolean | 基础属性 | true | 数据标签显示数值 |
显示单位 | isUnit | boolean | 基础属性 | 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 | - |
小数位数 | decimalDigits | number | 基础属性 | 0 | - |
后缀 | suffix | string | 基础属性 | "" | - |
#
无 事件#
进阶属性支持配置坐标轴样式、数据标签和显示单位等属性。
- 显示单位:数值量级支持
个/十/百/千/万/十万/百万/千万/亿
。 - 小数位数:支持设置
0-10
位小数。 - 后缀:支持自定义。默认根据数量级生成
-/十/百/千/万/十万/百万/千万/亿
。
#
APIs 使用场景当数据源配置时选择 APIs,需用户自行在 APIs 内按照参数结构定义数据,才可正常在统计卡片组件内渲染,详情请参见 图表组件参数定义。
?当使用 APIs 时,数据筛选、字段选择、统计方式、统计空值属性均需用户在所建 APIs 内自行定义,其他属性与数据模型使用场景配置保持一致。
#
使用示例下列示例数据源为销售业绩表。示例数据配置如下表所示。更多数据配置操作请参见 数据模型。
销售姓名 | 客户地区 | 销售总额 | 销售单数 | 性别 |
---|---|---|---|---|
张三 | 北京 | 1000000 | 3 | 男 |
赵四 | 北京 | 2000000 | 2 | 男 |
赵四 | 上海 | 100000 | 1 | 男 |
王五 | 上海 | 200000 | 1 | 男 |
王五 | 深圳 | 500000 | 1 | 男 |
李六 | 北京 | 5000000 | 6 | 女 |
李六 | 深圳 | 200000 | 1 | 女 |
#
示例 1:各销售人员的销售总业绩对比(纵向)新建柱状图组件,进入右侧属性 > 基础属性页面,单击数据源下拉菜单,选择销售业绩表并选择统计方法。
在维度(X 轴)单击字段选择下拉菜单,选择销售姓名。
在数值(Y 轴)下,单击添加 Y 轴字段。字段类型选择销售总额,关系类型选择求和。
下拉右侧属性,进入进阶属性内单击开启显示单位。单击数量值级下拉菜单设置为万,后缀项设置为万。
根据需要修改标题、坐标轴样式、图例样式等属性,最终效果如下图展示:
#
示例 2:各销售人员的销售总业绩对比(纵向)- 按照地区对比在 [示例 1]的配置基础上,增加分组字段,单击分组下拉菜单,选择客户地区。

最终效果展示:

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

#
示例 3:各销售人员的销售总业绩对比(纵向)- 仅查看性别为男的数据在 [示例 1]的配置基础上,单击数据筛选。
设置相应数据筛选参数,单击确定增加筛选条件。
#
示例 4:各销售人员的"客户覆盖地区数"对比和"总销售单数"对比(横向)柱形图方向单击选择横向。
在维度(Y 轴)单击字段选择下拉菜单,选择销售姓名。
在数值(X 轴)下,单击添加字段。添加以下两个字段:
- 字段 1:客户地区;统计方式:计数
- 字段 2:销售单数;统计方式:求和

最终效果展示:
#
限制说明维度轴不支持设置时间类型,可设置日期类型和日期时间类型。