- 推荐字段配置: 1个指标, 1个维度
- 支持数据重塑: 至少1个指标, 0个维度
堆叠玫瑰图支持以下视觉通道:
angle : 角度通道, 支持多个维度, 按维度值映射至角度轴
radius : 半径通道, 支持多个指标, 按指标值映射至半径轴
detail : 细分通道, 支持多个维度, 在同一个颜色系列下展示更细粒度的数据时使用
color : 颜色通道, 支持多个维度或 一个指标, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色
tooltip: 提示通道, 支持多个维度与 多个指标, 会在鼠标悬停在数据点上时展示
label : 标签通道, 支持多个维度与 多个指标, 会在数据点上展示数据标签
堆叠玫瑰图，适用于多维度数据对比场景，通过极坐标系下的扇形弧度和半径展示数据大小
适用场景:
- 多维度数据的分布对比
- 周期性数据的强弱比较
- 分类数据的数值与占比同时展示
数据要求:
- 至少1个数值字段（度量）
- 第一个维度会放至角度轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示
- 所有指标会自动合并为一个指标
默认开启的功能:
- 默认开启图例、极坐标系、数据标签、提示信息、数值缩放
Type: "rose"
堆叠玫瑰图
堆叠玫瑰图，通过极坐标系展示多维度数据对比关系
示例 'rose'
Type: Record<string | number, any>[]
数据集
符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 玫瑰图的数据最终会被转换为2个维度, 1个指标.
示例 [{month:'1月', value:100}, {month:'2月', value:150}, {month:'3月', value:120}]
Type: import("/Users/bytedance/Projects/VSeed/packages/vseed/src/index").RadarDimension[] | undefined
维度
玫瑰图的第一个维度被映射到角度轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示.
示例 [{id: 'category', alias: '类别'}]
Type: string
维度对应的字段id
Type: string | undefined
维度别名
Type: "color" | "detail" | "tooltip" | "label" | "row" | "column" | "angle" | undefined
维度映射的通道
- angle: 支持将多个维度映射到角度通道
- color: 支持将多个维度映射到颜色通道
- detail: 支持将多个维度映射到详情通道
- tooltip: 支持将多个维度映射到提示通道
- label: 支持将多个维度映射到标签通道
- row: 支持将多个维度映射到行通道
- column: 支持将多个维度映射到列通道
Type: import("/Users/bytedance/Projects/VSeed/packages/vseed/src/index").RadarMeasure[] | undefined
指标
玫瑰图的指标会自动合并为一个指标, 映射到半径轴, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示.
示例 [{id: 'value', alias: '数值'}]
Type: string
指标id, 不能重复
Type: string | undefined
指标别名, 允许重复, 未填写时, alias 为 id
Type: boolean | undefined
自动数值格式化 当配置了 format 时, 该配置项失效
开启后, 图表的数据标签、提示信息, 会根据指标的数值, 自动根据语言环境, 选择合适的格式化方式
格式化规则为设置为十进制数值, 开启compact notation, 最小0位小数, 最大2位小数, 自动四舍五入, 使用浏览器提供的 Intl.NumberFormatOptions 实现该逻辑.
例如:
当locale为zh-CN: 749740.264会被自动格式化为74.45万
当locale为en-US: 749740.264会被自动格式化为744.5K
Type: NumFormat | undefined
指标的数值格式化, 会自动应用于label、tooltip
Type: "number" | "percent" | "permille" | "scientific" | undefined
数字格式化类型, 支持数值(十进制)、百分比(%)、千分比(‰)、科学计数法
Type: number | undefined
数值格式化比例, 不能为0
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
Type: string | undefined
数值格式化符号, 例如%、‰
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
Type: boolean | undefined
数值格式化千分位分隔符
Type: string | undefined
数值格式化后缀
Type: string | undefined
数值格式化前缀
Type: number | undefined
数值格式化小数位, 使用浏览器提供的 Intl.NumberFormat 中的 minimumFractionDigits 和 maximumFractionDigits 进行格式化, 优先级低于 significantDigits
示例 - 1234.5678 转换为 1235, fractionDigits:0 (roundingMode:halfCeil) - 1234.5678 转换为 1234.6, fractionDigits:1 (roundingMode:halfCeil) - 1234.5678 转换为 1234.57, fractionDigits:2 (roundingMode:halfCeil) - 1234.5678 转换为 1230.568, fractionDigits:3 (roundingMode:halfCeil) - 1234.5678 转换为 1234.5678, fractionDigits:4 (roundingMode:halfCeil) - 1234.5678 转换为 1234.56780, fractionDigits:5 (roundingMode:halfCeil)
Type: number | undefined
数值格式化有效位, 使用浏览器提供的 Intl.NumberFormat 中的 minimumSignificantDigits 和 maximumSignificantDigits 进行格式化, 优先级高于 fractionDigits
示例 - 1234.5678 转换为 1000, significantDigits:1 - 1234.5678 转换为 1200, significantDigits:2 - 1234.5678 转换为 1230, significantDigits:3 - 1234.5678 转换为 1234, significantDigits:4 - 1234.5678 转换为 1234.6, significantDigits:5 (roundingMode:halfCeil) - 1234.5678 转换为 1234.57, significantDigits:6 (roundingMode:halfCeil) - 1234.5678 转换为 1234.568, significantDigits:7 (roundingMode:halfCeil) - 1234.5678 转换为 1234.5678, significantDigits:8 (roundingMode:halfCeil)
Type: "morePrecision" | "lessPrecision" | undefined
数值格式化舍入优先级, 处理同时设置了 significantDigits 和 fractionDigits 时的舍入优先级, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingPriority
示例 - 1234.5678 转换为 1230, significantDigits:3 (roundingPriority:lessPrecision) - 1234.5678 转换为 1234.5678, significantDigits:3 (roundingPriority:morePrecision)
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
数值格式化舍入模式, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingMode
Type: NumFormat | undefined
same as numFormat, 指标的数值格式化, 会自动应用于label、tooltip
Type: "number" | "percent" | "permille" | "scientific" | undefined
数字格式化类型, 支持数值(十进制)、百分比(%)、千分比(‰)、科学计数法
Type: number | undefined
数值格式化比例, 不能为0
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
Type: string | undefined
数值格式化符号, 例如%、‰
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
Type: boolean | undefined
数值格式化千分位分隔符
Type: string | undefined
数值格式化后缀
Type: string | undefined
数值格式化前缀
Type: number | undefined
数值格式化小数位, 使用浏览器提供的 Intl.NumberFormat 中的 minimumFractionDigits 和 maximumFractionDigits 进行格式化, 优先级低于 significantDigits
示例 - 1234.5678 转换为 1235, fractionDigits:0 (roundingMode:halfCeil) - 1234.5678 转换为 1234.6, fractionDigits:1 (roundingMode:halfCeil) - 1234.5678 转换为 1234.57, fractionDigits:2 (roundingMode:halfCeil) - 1234.5678 转换为 1230.568, fractionDigits:3 (roundingMode:halfCeil) - 1234.5678 转换为 1234.5678, fractionDigits:4 (roundingMode:halfCeil) - 1234.5678 转换为 1234.56780, fractionDigits:5 (roundingMode:halfCeil)
Type: number | undefined
数值格式化有效位, 使用浏览器提供的 Intl.NumberFormat 中的 minimumSignificantDigits 和 maximumSignificantDigits 进行格式化, 优先级高于 fractionDigits
示例 - 1234.5678 转换为 1000, significantDigits:1 - 1234.5678 转换为 1200, significantDigits:2 - 1234.5678 转换为 1230, significantDigits:3 - 1234.5678 转换为 1234, significantDigits:4 - 1234.5678 转换为 1234.6, significantDigits:5 (roundingMode:halfCeil) - 1234.5678 转换为 1234.57, significantDigits:6 (roundingMode:halfCeil) - 1234.5678 转换为 1234.568, significantDigits:7 (roundingMode:halfCeil) - 1234.5678 转换为 1234.5678, significantDigits:8 (roundingMode:halfCeil)
Type: "morePrecision" | "lessPrecision" | undefined
数值格式化舍入优先级, 处理同时设置了 significantDigits 和 fractionDigits 时的舍入优先级, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingPriority
示例 - 1234.5678 转换为 1230, significantDigits:3 (roundingPriority:lessPrecision) - 1234.5678 转换为 1234.5678, significantDigits:3 (roundingPriority:morePrecision)
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
数值格式化舍入模式, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingMode
Type: "color" | "tooltip" | "label" | "radius" | undefined
指标映射的通道
- radius: 指标映射的半径
- color: 指标映射的颜色
- label: 指标映射的标签
- tooltip: 指标映射的提示
Type: string | undefined
以扁平的指标配置形式, 构建树形指标组, parentId指向父级指标组的id, 用于构建指标树
指标树的配置存在两种形式, 方式一是直接配置带children的指标树, 方式二是配置parentId的扁平指标列表, 两种方式不能同时配置
Type: BackgroundColor
图表的背景颜色
背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)'
Type: Color | undefined
颜色
颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等.
Type: string[] | undefined
离散颜色配色方案, 颜色配色方案用于定义图表中不同元素的颜色
示例 ['#FFCDD2,#F8BBD0,#E1BEE7,#D1C4E9,#C5CAE9,#BBDEFB,#B3E5FC,#B2EBF2,#B2DFDB,#C8E6C9,#DCEDC8,#F0F4C3,#FFF9C4,#FFECB3,#FFE0B2']
Type: string[] | undefined
线性渐变颜色配色方案, 线性渐变颜色配色方案用于定义图表中不同元素的颜色
示例 ['#FFCDD2, #F8BBD0]
Type: Record<string, string> | undefined
颜色映射, 颜色映射用于将数据值映射到具体的颜色
示例 { 'profit': 'red', 'sales': 'blue', }
Type: string | undefined
正负颜色配置, 用于定义图表中正值的颜色
Type: string | undefined
正负颜色配置, 用于定义图表中负值的颜色
Type: PieLabel | undefined
标签
标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等.
Type: false | true
标签功能是否开启
Type: boolean | undefined
标签是否换行
Type: boolean | undefined
标签是否显示指标值
多指标的场景, 无需担心多个指标的值会矛盾, 因为所有的绘图相关的指标, 都会经过foldMeasures处理, 合并为一个指标, 代表一个数据点, 所以不会矛盾
注意: encoding的label优先级更高, 此配置不影响encoding的label
Type: boolean | undefined
标签是否显示指标值的百分比
多指标的场景, 无需担心多个指标的值会矛盾, 因为所有的绘图相关的指标, 都会经过foldMeasures处理, 合并为一个指标, 代表一个数据点, 所以不会矛盾
注意: encoding的label优先级更高, 此配置不影响encoding的label
Type: boolean | undefined
标签是否显示维度标签
展示所有维度标签
注意: encoding的label优先级更高, 此配置不影响encoding的label
Type: boolean | undefined
标签数值是否自动格式化, autoFormat 为 true 时, numFormat 配置失效
Type: NumFormat | undefined
标签数值格式化配置, 会和 measure 中的 format 进行合并, measure 中的 format 优先级更高. numFormat 优先级低于 autoFormat
Type: "number" | "percent" | "permille" | "scientific" | undefined
数字格式化类型, 支持数值(十进制)、百分比(%)、千分比(‰)、科学计数法
Type: number | undefined
数值格式化比例, 不能为0
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
Type: string | undefined
数值格式化符号, 例如%、‰
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
Type: boolean | undefined
数值格式化千分位分隔符
Type: string | undefined
数值格式化后缀
Type: string | undefined
数值格式化前缀
Type: number | undefined
数值格式化小数位, 使用浏览器提供的 Intl.NumberFormat 中的 minimumFractionDigits 和 maximumFractionDigits 进行格式化, 优先级低于 significantDigits
示例 - 1234.5678 转换为 1235, fractionDigits:0 (roundingMode:halfCeil) - 1234.5678 转换为 1234.6, fractionDigits:1 (roundingMode:halfCeil) - 1234.5678 转换为 1234.57, fractionDigits:2 (roundingMode:halfCeil) - 1234.5678 转换为 1230.568, fractionDigits:3 (roundingMode:halfCeil) - 1234.5678 转换为 1234.5678, fractionDigits:4 (roundingMode:halfCeil) - 1234.5678 转换为 1234.56780, fractionDigits:5 (roundingMode:halfCeil)
Type: number | undefined
数值格式化有效位, 使用浏览器提供的 Intl.NumberFormat 中的 minimumSignificantDigits 和 maximumSignificantDigits 进行格式化, 优先级高于 fractionDigits
示例 - 1234.5678 转换为 1000, significantDigits:1 - 1234.5678 转换为 1200, significantDigits:2 - 1234.5678 转换为 1230, significantDigits:3 - 1234.5678 转换为 1234, significantDigits:4 - 1234.5678 转换为 1234.6, significantDigits:5 (roundingMode:halfCeil) - 1234.5678 转换为 1234.57, significantDigits:6 (roundingMode:halfCeil) - 1234.5678 转换为 1234.568, significantDigits:7 (roundingMode:halfCeil) - 1234.5678 转换为 1234.5678, significantDigits:8 (roundingMode:halfCeil)
Type: "morePrecision" | "lessPrecision" | undefined
数值格式化舍入优先级, 处理同时设置了 significantDigits 和 fractionDigits 时的舍入优先级, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingPriority
示例 - 1234.5678 转换为 1230, significantDigits:3 (roundingPriority:lessPrecision) - 1234.5678 转换为 1234.5678, significantDigits:3 (roundingPriority:morePrecision)
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
数值格式化舍入模式, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingMode
Type: number | undefined
标签字体大小
Type: string | number | undefined
标签字体粗细
Type: string | undefined
标签背景色
Type: string | undefined
标签描边颜色
Type: string | undefined
标签字体颜色
Type: boolean | undefined
标签是否自动根据图元颜色进行字体颜色的反转
Type: "inside" | "outside" | undefined
标签位置
Type: boolean | undefined
标签防重叠功能是否启用
Type: Selector | Selectors | undefined
标签筛选，默认selectors之间条件关系为Or
Type: string
维度字段, dimensions 某一项的 id
Type: "in" | "not in" | undefined
操作符
- in: 选择数据项中维度字段的值在 value 中的数据项
- not in: 选择数据项中维度字段的值不在 value 中的数据项
Type: "in" | "not in" | undefined
操作符
- in: 选择数据项中维度字段的值在 value 中的数据项
- not in: 选择数据项中维度字段的值不在 value 中的数据项
same as operator
Type: string | number | (string | number)[]
选择数据项中维度字段的值, 支持数组
Type: "arc" | "labelLine" | "edge" | undefined
标签布局方式, 仅对饼图、环形图生效且labelPosition为outside时生效
- arc: 按弧形为标签布局
- labelLine: 标签两端对齐, 通过引导线连接扇形图元与标签
- edge: 标签两端对齐, 通过引导线连接扇形图元与标签, 并且贴近图表两端边缘
Type: Legend | undefined
图例
图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等.
Type: boolean | undefined
图例功能是否开启
示例 enable: true
Type: boolean | undefined
图例边框是否开启
示例 border: true
仅离散图例生效
Type: string | undefined
图例字体颜色
Type: string | undefined
分页器icon颜色
Type: string | undefined
分页器icon置灰颜色
Type: number | undefined
图例字体大小
示例 labelFontSize: 10
Type: string | undefined
图例字体颜色
Type: string | number | undefined
图例字体粗细
示例 labelFontWeight: 400
Type: "circle" | "cross" | "diamond" | "square" | "arrow" | "arrow2Left" | "arrow2Right" | "wedge" | "thinTriangle" | "triangle" | "triangleUp" | "triangleDown" | "triangleRight" | "triangleLeft" | "stroke" | "star" | "wye" | "rect" | "arrowLeft" | "arrowRight" | "rectRound" | "roundLine" | undefined
图例形状
示例 shapeType: 'circle'
仅离散图例生效
Type: "left" | "leftTop" | "leftBottom" | "lt" | "lb" | "top" | "topLeft" | "topRight" | "tl" | "tr" | "right" | "rightTop" | "rightBottom" | "rt" | "rb" | "bottom" | "bottomLeft" | "bottomRight" | "bl" | "br" | undefined
图例位置
示例 position: 'rightTop'
Type: number | undefined
存在大量图例时, 最大列数 或 图例最大行数
如果position为水平方向(bottom, bottomLeft, bottomRight, bl, br, top, topLeft, topRight, tl, tr), maxSize控制显示的列数
如果position为垂直方向(left, leftTop, leftBottom, lt, lb, right, rightTop, rightBottom, rt, rb), maxSize控制显示的行数
示例 maxSize: 2
仅离散图例生效
Type: Tooltip | undefined
提示信息
提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等.
Type: false | true
提示信息功能是否开启
Type: Brush | undefined
框选
框选配置，用于开启/关闭 brush 框选能力
Type: boolean | undefined
是否开启brush框选
Type: boolean | undefined
框选结束是否清除选框
Type: Theme | undefined
图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置
内置light与dark两种主题, 用户可以通过Builder自定义主题
示例 'dark'
'light'
'customThemeName'
Type: number
Type: unique symbol
Type: Locale | undefined
语言
图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言