饼图|飞书低代码平台

饼图|飞书低代码平台

飞书低代码平台手册精选NaN-NaN-NaN
产品功能
概述
  • 饼图组件:包括饼图和环图,主要用于展示不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例,环图中间空余的部分可以用来显示一些额外的文字等信息。
  • 适用场景:
  • 一个维度下的数据类目较多
  • 展示某一维度各数据的占比情况
属性说明
饼图类型:饼图和环图可按需切换
250px|700px|reset
此处仅说明针对环图/饼图的属性配置
属性设置
说明
图例
图表生成器配置
  • 删除默认的样例数据后,可利用图表生成器生成图表和数据,也可直接通过属性面板中的图表生成器配置
  • 配置对象数据
  • 配置维度(颜色)
  • 配置指标(角度)
  • 配置数据过滤条件、条件组或选择已有筛选组件
250px|700px|reset
图表字段
支持的字段数量
  • 维度(颜色):1 个
  • 指标(角度):1 个
250px|700px|reset
显示设置
  • 排序规则
  • 图例
  • 数据标签
  • 百分比
  • 维度
  • 环图支持显示总数(饼图不支持)
250px|700px|reset
使用示例-项目状态分布
图表配置可分为3步:配置属性-配置样式-配置事件
Step 1 配置属性
  1. 在画布中拖入「饼图」组件,饼图类型选择环图
  1. 可按照整体配置选择主题色,此处默认选择
  1. 利用图表生成器配置饼图数据和指标、维度字段
「项目信息」对象已提前设置完成,设置方式可查看对象,此处不再赘述
  1. 设置图表字段
  • 维度(颜色):项目状态
  • 指标(角度):ID(计数)
250px|700px|reset
  1. 点击提交生成图表
  1. 内容 - 拓展 - 顶部区域,设置标题区
250px|700px|reset
  1. 显示设置
按需配置:排序规则、图例、数据标签、百分比、维度、总数(仅环图支持),操作效果如下
250px|700px|reset
Step 2 配置样式
此处我们选择默认样式,可根据实际需要调整外观和样式设置,设置细节如下图
250px|700px|reset
Step 3 配置数据导出按钮
添加「导出」按钮
  1. 使用拓展-顶部区域「导出」按钮,或可再顶部区域中拖入「按钮」组件,将按钮调整到合适的大小。
250px|700px|reset
关联「导出」事件
  • 添加事件:点击时
  • 配置事件:
  • 动作:导出数据
  • 数据:选择图表生产给你其所生成的数据
注意:导出的数据是个数组类型
  • 定义文件名
  • 选择导出类型:csv、excel
250px|700px|reset
预览效果
环图:
250px|700px|reset
暴露的状态
属性名称
类型
描述
data
any[]
图表的数据
categoryField
any[]
维度的数组
valueField
any[]
指标的数组
themeColor
any[]
颜色分组数组
hidden
boolean
是否隐藏
loading
boolean
是否加载中
暴露的方法
属性名称
类型
描述
setData(v: boolean)
function
接受一个对象数组
setHidden(v: boolean)
function
设置图表的 loading 属性
设置隐藏
  • True :隐藏
  • false:显示
先进生产力和业务协同平台
联系我们立即试用

先进团队,先用飞书

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