概述
- 柱形图是通过同一宽度不同高度的柱子来代表数据，利用柱高来反映数据的差异。
- 适用：展示多个类别维度的数据变化和同维度各变量之间比较情况。
属性说明
此处仅说明针对柱状图的属性配置
属性设置 | 说明 | 图例 |
选择数据 |
| 250px|700px|reset |
图表生成器 |
| 250px|700px|reset |
图表字段 | 支持的字段数量
| 250px|700px|reset |
拓展区域 |
| 250px|700px|reset |
数据导出配置 |
| 250px|700px|reset |
显示设置 |
| 250px|700px|reset |
使用示例：项目任务管理-数据统计
图表配置可分为3步：配置属性-配置样式-配置事件
Step 1 配置图表属性
创建柱状图组件：
- 使用图表生成器配器配置数据对象和图表字段
- 数据-对象：项目信息
- 图表字段
- X 轴（维度）：负责人
- Y 轴（指标）：项目数量， ID（计数）
- 颜色（维度）：项目状态
250px|700px|reset
- 配置标题区
250px|700px|reset
- 显示设置
根据需求配置：排序规则、图例、数据标签、X轴标题、Y轴（左侧）数值、Y轴（左侧）标题、百分比堆积
250px|700px|reset
Step 2 图表样式
此处我们选择默认样式，设置细节说明，参考如图
250px|700px|reset
Step 3 配置数据导出按钮
添加「导出」按钮
- 使用拓展-顶部区域「导出」按钮，或可再顶部区域中拖入「按钮」组件，将按钮调整到合适的大小。
250px|700px|reset
关联「导出」事件
- 添加事件：点击时
- 配置事件：
- 动作：导出数据
- 数据：选择图表生产给你其所生成的数据
注意：导出的数据是个数组类型
- 定义文件名
- 选择导出类型：csv、excel
250px|700px|reset
预览效果
250px|700px|reset
暴露的状态
属性名称 | 类型 | 描述 |
data | any[] | 图表的数据 |
xField | any[] | x轴的字符串数组 |
yField | any[] | y轴的字符串数组 |
themeColor | any[] | 颜色分组数组 |
seriesField | any[] | 分组字段的字符串数组 |
hidden | boolean | 是否隐藏 |
loading | boolean | 是否加载中 |
暴露的方法
属性名称 | 类型 | 描述 |
setData(v: boolean) | function | 接受一个对象数组 |
setHidden(v: boolean) | function | 设置图表的 loading 属性 设置隐藏
|
常见场景示例
如何配置「分组柱状图」
新版的柱形图是通过维度（X轴）来进行分组的配置，可以选择颜色作为分组。
方法一：用「图表生成器」搭建（引导式搭建）
操作步骤如下：
- 拖入柱状图
- 使用图表生成器
- 选择数据对象
- 配置维度X轴，注意字段顺序
- 首映年份
- 电影制作国家
- 配置指标
- ID（计数）
- 配置分组（颜色）
- 电影制作国家
- 点击生成图表
250px|700px|reset
- 搭建实现效果：自动填入字段和维度颜色效果
250px|700px|reset
方法二：用属性配置搭建（从 0 到 1 搭建）
- 用数据请求配置数据：
- 配置两个分组字段：首映年份和电影制作国家，
- 配置汇总字段 ID
- 聚合方式为计数
- 根据实际是否需要增加筛选条件
250px|700px|reset
- 配置完数据请求后，拖入柱状图到画布中，选择上面配置的数据请求，然后配置图表字段属性，参考如下：
- 维度（X轴）：
- 首映年份
- 制作国家
- 指标（Y轴）：电影数量_id_count
- 分组（颜色）：制作国家
- 搭建实现效果：
- 以首映年份和制作国家交叉作为柱子
- 柱子的高度代表电影数量
- 柱子的颜色代表制作国家
- 分颜色的柱子大小代表该年份该国家的电影数量
250px|700px|reset
如何配置「堆叠柱状图」
堆叠柱状图需要有1个指标字段，2个维度字段：
- 指标字段配置项为指标（Y轴）；
- 其中一个维度为X轴，配置项为维度（X轴）；
- 另一个维度在垂直方向上堆叠，配置项为分组（颜色）。
搭建说明：
- 如下针对数据请求结果返回数据包含「年份字段year，渠道字段type，销售数量字段amount」的示例数据。
- 参考如下图配置：
- 维度（X轴）：年份year
- 指标（Y轴）：销售数量amount
- 分组（颜色）：渠道字段type
- 实现效果
- 以年份作为 X 轴
- 柱状的高度代表销售数量
- 柱状的颜色代表渠道
- 分颜色的柱状高度代表渠道对应年份的销售数量
250px|700px|reset
