柱状图

适用场景#

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

使用说明#

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

属性#

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

柱形图方向	`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	女