条形图|飞书低代码平台

条形图|飞书低代码平台

飞书低代码平台手册精选NaN-NaN-NaN
产品功能
概述
  • 条形图是柱状图的横向展示方式,用若干个细长的横条长度来表达各类维度数量大小的图形,主要用于数据间的比较。
  • 条形图适用场景:
  • 图表维度数量较多
  • 维度名称长度较长时,横向展示,符合阅读习惯
属性说明
此处仅说明针对条形图的属性配置
属性
说明
图例
图表生成器
  • 删除默认的样例数据后,可利用图表生成器生成图表和数据,也可直接通过属性面板中的图表生成器配置
  • 配置对象数据
  • 配置维度(Y)轴
  • 配置指标(X)轴
  • 配置颜色(分组)维度,基于现有维度进一步分组为不同色块展示
  • 配置数据过滤条件、条件组或选择已有筛选组件
250px|700px|reset
图表字段
支持的字段数量:
  • 维度(Y轴):1个
  • 指标(X轴):1个
  • 颜色(维度):0-1个
250px|700px|reset
显示设置
  • 排序规则
  • 图例
  • 数据标签
  • Y轴(左侧)数值
  • Y轴(左侧)标题
  • X轴数值
  • X轴标题
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 属性
设置隐藏
  • True :隐藏
  • false:显示
常见场景示例
场景一:如何配置「分组条形图」
新版的条形图是通过维度(Y轴)来进行分组的配置,可以选择添加颜色分组来实现不同的分组展现不同的颜色来区分。
方法一:用「图表生成器」搭建(引导式搭建)
操作步骤如下:
  1. 拖入条形图
  1. 使用图表生成器
  1. 选择数据对象
  1. 配置维度(Y轴),注意字段顺序
  1. 首映年份
  1. 电影制作国家
  1. 配置指标(X轴)
  1. ID(计数)
  1. 配置分组(颜色)
  1. 电影制作国家
  1. 点击生成图表
250px|700px|reset
image.png
  1. 搭建实现效果:自动填入字段和维度颜色效果
250px|700px|reset
image.png
方法二:用属性配置搭建(从 0 到 1 搭建)
  1. 用数据请求配置数据:
  1. 配置两个分组字段:首映年份和电影制作国家,
  1. 配置汇总字段 ID
  1. 聚合方式为计数
  1. 根据实际是否需要增加筛选条件
250px|700px|reset
image.png
  1. 配置完数据请求后,拖入「条形图组件」到画布中,选择上面配置的数据请求,然后配置图表字段属性,参考如下:
  1. 维度(X轴):
  1. 首映年份
  1. 制作国家
  1. 指标(Y轴):电影数量_id_count
  1. 分组(颜色):制作国家
  1. 搭建实现效果:
  1. 以「首映年份」和「制作国家」作为条形
  1. 条形的长度代表电影数量
  1. 条形的颜色代表制作国家
  1. 分颜色的条形长度代表该年份该国家的电影数量
250px|700px|reset
image.png
场景二:如何配置「堆叠条形图」
堆叠条形图需要有 1 个指标字段,2 个维度字段:
  • 指标字段配置项为指标(X轴);
  • 其中一个维度为Y轴,配置项为维度(Y轴);
  • 另一个维度在水平方向上堆叠,配置项为分组(颜色)。
搭建说明:
  1. 针对数据请求结果返回数据包含「年份字段 year,渠道字段 type,销售数量字段 amount」的示例数据。
  1. 配置如下:
  • 维度(Y轴):年份year
  • 指标(X轴):销售数量amount
  • 分组(颜色):渠道字段type
  1. 实现效果
  • 以年份作为 Y 轴
  • 条形的长度代表销售数量
  • 条形的颜色代表渠道
  • 分颜色的条形高度代表渠道对应年份的销售数量
250px|700px|reset
image.png
先进生产力和业务协同平台
联系我们立即试用

先进团队,先用飞书

欢迎联系我们,飞书效能顾问将为您提供全力支持
分享先进工作方式
输送行业最佳实践
全面协助组织提效
联系我们立即试用