Scatter
- 推荐字段配置: 2个指标, 1个维度
- 支持数据重塑: 至少1个指标, 0个维度
散点图支持以下视觉通道:
xAxis : x轴通道, 支持多个指标, 按指标值映射至x轴
yAxis : y轴通道, 支持多个指标, 按指标值映射至y轴
color : 颜色通道, 支持多个维度或 一个指标, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色
tooltip: 提示通道, 支持多个维度与 多个指标, 会在鼠标悬停在数据点上时展示
label : 标签通道, 支持多个维度与 多个指标, 会在数据点上展示数据标签
散点图，适用于展示数据的分布情况，通过点的位置表示数据的数值
适用场景:
- 分析数据的分布特征, 如数据的中心趋势, 分布范围, 异常值等
数据要求:
- 至少2个数值字段（度量）
- 第一个指标字段会放至X轴, 其余指标会进行合并, 映射至Y轴
- 指标名称和维度名称会合并, 作为图例项展示
默认开启的功能:
- 默认开启图例、坐标轴、数据点标记、提示信息、趋势线
chartType
Type: "scatter"
散点图
散点图，适用于展示数据的分布情况，通过点的位置表示数据的数值
示例 'scatter'
dataset
Type: Record<string | number, any>[]
数据集
符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 折线图的数据最终会被转换为2个维度, 1个指标.
示例 [{month:'1月', value:100}, {month:'2月', value:150}, {month:'3月', value:120}]
dimensions
Type: ScatterDimension[] | undefined
维度
散点图的第一个维度被映射到X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示
示例 [{id: "month", alias: "月份"}]
id
Type: string
维度对应的字段id
alias
Type: string | undefined
维度别名
encoding
Type: "color" | "detail" | "tooltip" | "label" | "row" | "column" | undefined
维度映射的通道
- color: 支持将多个维度映射到颜色通道
- detail: 支持将多个维度映射到详情通道
- tooltip: 支持将多个维度映射到提示通道
- label: 支持将多个维度映射到标签通道
- row: 支持将多个维度映射到行通道
- column: 支持将多个维度映射到列通道
measures
Type: ScatterMeasure[] | undefined
散点图指标
示例 [ { id: 'profit', alias: '利润', encoding: 'xAxis' }, { id: 'sales', alias: '销售额', encoding: 'yAxis' } ]
id
Type: string
指标id, 不能重复
alias
Type: string | undefined
指标别名, 允许重复, 未填写时, alias 为 id
autoFormat
Type: boolean | undefined
自动数值格式化，默认开启，优先级最高
当 autoFormat=true 时，会覆盖 numFormat 的所有配置
开启后，图表的数据标签、提示信息会根据指标数值和语言环境自动选择合适的格式化方式
格式化规则：十进制数值，开启 compact notation，最小0位小数，最大2位小数，自动四舍五入，使用浏览器提供的 Intl.NumberFormat 实现
例如:
- locale为zh-CN: 749740.264 → 74.45万
- locale为en-US: 749740.264 → 744.5K
numFormat
Type: NumFormat | undefined
自定义指标的数值格式化，会自动应用于 label、tooltip
注意：若要使用自定义格式化，必须显式设置 autoFormat=false，否则 autoFormat 会覆盖此配置
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
数字格式化类型, 支持数值(十进制)、百分比(%)、千分比(‰)、科学计数法
ratio
Type: number | undefined
数值格式化比例, 不能为0
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
数值格式化符号, 例如%、‰
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
thousandSeparator
Type: boolean | undefined
数值格式化千分位分隔符
suffix
Type: string | undefined
数值格式化后缀
prefix
Type: string | undefined
数值格式化前缀
fractionDigits
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)
significantDigits
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)
roundingPriority
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)
roundingMode
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
数值格式化舍入模式, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingMode
format
Type: NumFormat | undefined
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
数字格式化类型, 支持数值(十进制)、百分比(%)、千分比(‰)、科学计数法
ratio
Type: number | undefined
数值格式化比例, 不能为0
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
数值格式化符号, 例如%、‰
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
thousandSeparator
Type: boolean | undefined
数值格式化千分位分隔符
suffix
Type: string | undefined
数值格式化后缀
prefix
Type: string | undefined
数值格式化前缀
fractionDigits
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)
significantDigits
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)
roundingPriority
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)
roundingMode
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
数值格式化舍入模式, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingMode
encoding
Type: "xAxis" | "color" | "tooltip" | "label" | "yAxis" | "size" | undefined
指标映射的通道
- xAxis: 指标映射的x轴
- yAxis: 指标映射的y轴
- size: 指标映射的大小
- color: 指标映射的颜色
- label: 指标映射的标签
- tooltip: 指标映射的提示
parentId
Type: string | undefined
以扁平的指标配置形式, 构建树形指标组, parentId指向父级指标组的id, 用于构建指标树
指标树的配置存在两种形式, 方式一是直接配置带children的指标树, 方式二是配置parentId的扁平指标列表, 两种方式不能同时配置
page
Type: Page | undefined
分页配置, 用于指定分页的字段名, 必须是维度
field
Type: string
分页字段, 用于指定分页的字段名, 必须是维度
currentValue
Type: string
当前分页值, 用于指定当前分页的依据值
示例 '2023-01-01'
size
Type: number | number[] | undefined
散点图指标的大小, 用于定义散点图中数据点的大小 或 大小范围
- 若大小范围是一个数字, 例如10, 表示数据点的大小范围固定为10
- 若大小范围是一个长度为2的数组, 例如[10, 40], 表示数据点的大小范围在10到40之间
- 与sizeRange互斥, 优先级低于 size
sizeRange
Type: number | number[] | undefined
散点图指标的大小范围, 用于定义散点图中数据点的大小范围,
- 若大小范围是一个长度为2的数组, 例如[10, 40], 表示数据点的大小范围在10到40之间
- 若大小范围是一个数字, 例如10, 表示数据点的大小范围固定为10
- 与sizeRange互斥, 优先级高于 size
backgroundColor
Type: BackgroundColor
图表的背景颜色
背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)'
color
Type: Color | undefined
颜色
颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等.
colorScheme
Type: string[] | undefined
离散颜色配色方案, 颜色配色方案用于定义图表中不同元素的颜色
示例 ['#FFCDD2,#F8BBD0,#E1BEE7,#D1C4E9,#C5CAE9,#BBDEFB,#B3E5FC,#B2EBF2,#B2DFDB,#C8E6C9,#DCEDC8,#F0F4C3,#FFF9C4,#FFECB3,#FFE0B2']
linearColorScheme
Type: string[] | undefined
线性渐变颜色配色方案, 线性渐变颜色配色方案用于定义图表中不同元素的颜色
示例 ['#FFCDD2, #F8BBD0]
colorMapping
Type: Record<string, string> | undefined
颜色映射, 颜色映射用于将数据值映射到具体的颜色
示例 { 'profit': 'red', 'sales': 'blue', }
positiveColor
Type: string | undefined
正负颜色配置, 用于定义图表中正值的颜色
negativeColor
Type: string | undefined
正负颜色配置, 用于定义图表中负值的颜色
label
Type: Label | undefined
标签
标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等.
enable
Type: false | true
标签功能是否开启
wrap
Type: boolean | undefined
标签是否换行
showValue
Type: boolean | undefined
标签是否显示指标值
多指标的场景, 无需担心多个指标的值会矛盾, 因为所有的绘图相关的指标, 都会经过foldMeasures处理, 合并为一个指标, 代表一个数据点, 所以不会矛盾
注意: encoding的label优先级更高, 此配置不影响encoding的label
showValuePercent
Type: boolean | undefined
标签是否显示指标值的百分比
多指标的场景, 无需担心多个指标的值会矛盾, 因为所有的绘图相关的指标, 都会经过foldMeasures处理, 合并为一个指标, 代表一个数据点, 所以不会矛盾
注意: encoding的label优先级更高, 此配置不影响encoding的label
showDimension
Type: boolean | undefined
标签是否显示维度标签
展示所有维度标签
注意: encoding的label优先级更高, 此配置不影响encoding的label
autoFormat
Type: boolean | undefined
标签数值是否自动格式化, autoFormat 为 true 时, numFormat 配置失效
numFormat
Type: NumFormat | undefined
标签数值格式化配置, 会和 measure 中的 format 进行合并, measure 中的 format 优先级更高. numFormat 优先级低于 autoFormat
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
数字格式化类型, 支持数值(十进制)、百分比(%)、千分比(‰)、科学计数法
ratio
Type: number | undefined
数值格式化比例, 不能为0
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
数值格式化符号, 例如%、‰
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
thousandSeparator
Type: boolean | undefined
数值格式化千分位分隔符
suffix
Type: string | undefined
数值格式化后缀
prefix
Type: string | undefined
数值格式化前缀
fractionDigits
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)
significantDigits
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)
roundingPriority
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)
roundingMode
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
数值格式化舍入模式, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingMode
labelFontSize
Type: number | undefined
标签字体大小
labelFontWeight
Type: string | number | undefined
标签字体粗细
labelBackgroundColor
Type: string | undefined
标签背景色
labelStroke
Type: string | undefined
标签描边颜色
labelColor
Type: string | undefined
标签字体颜色
labelColorSmartInvert
Type: boolean | undefined
标签是否自动根据图元颜色进行字体颜色的反转
labelPosition
Type: "inside" | "outside" | undefined
标签位置
labelOverlap
Type: boolean | undefined
标签防重叠功能是否启用
selector
Type: Selector | Selectors | undefined
标签筛选，默认selectors之间条件关系为Or
field
Type: string
维度字段, dimensions 某一项的 id
operator
Type: "in" | "not in" | undefined
操作符
- in: 选择数据项中维度字段的值在 value 中的数据项
- not in: 选择数据项中维度字段的值不在 value 中的数据项
op
Type: "in" | "not in" | undefined
操作符
- in: 选择数据项中维度字段的值在 value 中的数据项
- not in: 选择数据项中维度字段的值不在 value 中的数据项
same as operator
value
Type: string | number | (string | number)[]
选择数据项中维度字段的值, 支持数组
legend
Type: Legend | undefined
图例
图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等.
enable
Type: boolean | undefined
图例功能是否开启
示例 enable: true
border
Type: boolean | undefined
图例边框是否开启
仅离散图例生效
示例 border: true
labelColor
Type: string | undefined
图例字体颜色
pagerIconColor
Type: string | undefined
分页器icon颜色
pagerIconDisableColor
Type: string | undefined
分页器icon置灰颜色
labelFontSize
Type: number | undefined
图例字体大小
示例 labelFontSize: 10
labelFontColor
Type: string | undefined
图例字体颜色
labelFontWeight
Type: string | number | undefined
图例字体粗细
示例 labelFontWeight: 400
shapeType
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'
position
Type: "left" | "leftTop" | "leftBottom" | "lt" | "lb" | "top" | "topLeft" | "topRight" | "tl" | "tr" | "right" | "rightTop" | "rightBottom" | "rt" | "rb" | "bottom" | "bottomLeft" | "bottomRight" | "bl" | "br" | undefined
图例位置
示例 position: 'rightTop'
maxSize
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
tooltip
Type: Tooltip | undefined
提示信息
提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等.
enable
Type: false | true
提示信息功能是否开启
brush
Type: Brush | undefined
框选
框选配置，用于开启/关闭 brush 框选能力
图表框选配置
enable
Type: boolean | undefined
是否开启brush框选
brushType
Type: "rect" | "x" | "y" | "polygon" | undefined
brush的类型
定义刷选框的形状和刷选方向
- rect: 矩形框选，可以在X轴和Y轴两个方向上同时进行框选
- polygon: 多边形框选，通过点击多个点绘制任意多边形进行框选
- x: X轴方向框选，只在X轴方向上进行框选，Y轴方向不限制
- y: Y轴方向框选，只在Y轴方向上进行框选，X轴方向不限制
brushMode
Type: "single" | "multiple" | undefined
框选模式，单选还是多选
定义刷选的模式
- single: 单选模式，每次只能有一个刷选框
- multiple: 多选模式，可以同时存在多个刷选框
removeOnClick
Type: boolean | undefined
框选结束是否清除选框
inBrushStyle
Type: { opacity?: number; stroke?: string; lineWidth?: number; } | undefined
被框选中的数据样式
定义被刷选中的数据点的样式
opacity
Type: number | undefined
不透明度
被框选中的数据点的不透明度，取值范围 0-1
stroke
Type: string | undefined
描边颜色
lineWidth
Type: number | undefined
描边宽度
outOfBrushStyle
Type: { opacity?: number; stroke?: string; lineWidth?: number; } | undefined
未被框选中的数据样式
定义未被刷选中的数据点的样式
opacity
Type: number | undefined
不透明度
未被框选中的数据点的不透明度，取值范围 0-1
stroke
Type: string | undefined
描边颜色
lineWidth
Type: number | undefined
描边宽度
xAxis
Type: XLinearAxis | undefined
x轴
数值轴, x轴配置, 用于定义图表的x轴, 包括x轴的位置, 格式, 样式等.
visible
Type: boolean | undefined
轴是否可见
min
Type: number | undefined
轴的最小值, 优先级高于 nice 与 zero
max
Type: number | undefined
轴的最大值, 优先级高于 nice 与 zero
log
Type: boolean | undefined
是否使用对数轴, 仅对数值轴生效
logBase
Type: number | undefined
对数轴的底数, 仅对数值轴生效
nice
Type: boolean | undefined
是否自动调整轴的刻度间隔，使刻度标签更易读, 当配置了 min 和 max, 该配置项失效, 仅对数值轴生效
inverse
Type: boolean | undefined
轴是否反向展示, 仅对数值轴生效
zero
Type: boolean | undefined
是否在坐标轴上强制显示 0 值, 当配置了 min 和 max, 该配置项失效, 仅对数值轴生效
autoFormat
Type: boolean | undefined
是否自动格式化数值轴的刻度标签, 仅对数值轴生效, autoFormat 为 true 时, numFormat 配置失效
numFormat
Type: NumFormat | undefined
数值轴的数字格式化, 仅对数值轴生效, 优先级低于 autoFormat
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
数字格式化类型, 支持数值(十进制)、百分比(%)、千分比(‰)、科学计数法
ratio
Type: number | undefined
数值格式化比例, 不能为0
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
数值格式化符号, 例如%、‰
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
thousandSeparator
Type: boolean | undefined
数值格式化千分位分隔符
suffix
Type: string | undefined
数值格式化后缀
prefix
Type: string | undefined
数值格式化前缀
fractionDigits
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)
significantDigits
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)
roundingPriority
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)
roundingMode
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
数值格式化舍入模式, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingMode
label
Type: { visible?: boolean; labelColor?: string; labelFontSize?: number; labelFontWeight?: number; labelAngle?: number; } | undefined
X轴刻度标签
visible
Type: boolean | undefined
标签是否可见
labelColor
Type: string | undefined
标签颜色
labelFontSize
Type: number | undefined
标签字体大小
labelFontWeight
Type: number | undefined
标签字体粗细
labelAngle
Type: number | undefined
标签旋转角度
line
Type: { visible?: boolean; lineColor?: string; lineWidth?: number; } | undefined
X轴线
visible
Type: boolean | undefined
轴线是否可见
lineColor
Type: string | undefined
轴线颜色
lineWidth
Type: number | undefined
轴线宽度
tick
Type: { visible?: boolean; tickInside?: boolean; tickColor?: string; tickSize?: number; } | undefined
X轴刻度
visible
Type: boolean | undefined
刻度是否可见
tickInside
Type: boolean | undefined
刻度是否朝内
tickColor
Type: string | undefined
刻度颜色
tickSize
Type: number | undefined
刻度尺寸
title
Type: { visible?: boolean; titleText?: string; titleColor?: string; titleFontSize?: number; titleFontWeight?: number; } | undefined
X轴标题
visible
Type: boolean | undefined
标题是否可见
titleText
Type: string | undefined
标题文本, 默认跟随字段配置
titleColor
Type: string | undefined
标题颜色
titleFontSize
Type: number | undefined
标题字体大小
titleFontWeight
Type: number | undefined
标题字体粗细
grid
Type: { visible?: boolean; gridColor?: string; gridWidth?: number; gridLineDash?: number[]; } | undefined
X轴网格线
visible
Type: boolean | undefined
gridColor
Type: string | undefined
网格线颜色
gridWidth
Type: number | undefined
网格线宽度
gridLineDash
Type: number[] | undefined
网格线类型
yAxis
Type: YLinearAxis | undefined
y轴
数值轴, y轴配置, 用于定义图表的y轴, 包括y轴的位置, 格式, 样式等.
visible
Type: boolean | undefined
轴是否可见
min
Type: number | undefined
轴的最小值, 优先级高于 nice 与 zero
max
Type: number | undefined
轴的最大值, 优先级高于 nice 与 zero
log
Type: boolean | undefined
是否使用对数轴, 仅对数值轴生效
logBase
Type: number | undefined
对数轴的底数, 仅对数值轴生效
nice
Type: boolean | undefined
是否自动调整轴的刻度间隔，使刻度标签更易读, 当配置了 min 和 max, 该配置项失效, 仅对数值轴生效
inverse
Type: boolean | undefined
轴是否反向展示, 仅对数值轴生效
zero
Type: boolean | undefined
是否在坐标轴上强制显示 0 值, 当配置了 min 和 max, 该配置项失效, 仅对数值轴生效
autoFormat
Type: boolean | undefined
是否自动格式化数值轴的刻度标签, 仅对数值轴生效, autoFormat 为 true 时, numFormat 配置失效
numFormat
Type: NumFormat | undefined
数值轴的数字格式化, 仅对数值轴生效, 优先级低于 autoFormat
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
数字格式化类型, 支持数值(十进制)、百分比(%)、千分比(‰)、科学计数法
ratio
Type: number | undefined
数值格式化比例, 不能为0
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
数值格式化符号, 例如%、‰
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
thousandSeparator
Type: boolean | undefined
数值格式化千分位分隔符
suffix
Type: string | undefined
数值格式化后缀
prefix
Type: string | undefined
数值格式化前缀
fractionDigits
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)
significantDigits
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)
roundingPriority
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)
roundingMode
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
数值格式化舍入模式, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingMode
label
Type: { visible?: boolean; labelColor?: string; labelFontSize?: number; labelFontWeight?: number; labelAngle?: number; } | undefined
X轴刻度标签
visible
Type: boolean | undefined
标签是否可见
labelColor
Type: string | undefined
标签颜色
labelFontSize
Type: number | undefined
标签字体大小
labelFontWeight
Type: number | undefined
标签字体粗细
labelAngle
Type: number | undefined
标签旋转角度
line
Type: { visible?: boolean; lineColor?: string; lineWidth?: number; } | undefined
X轴线
visible
Type: boolean | undefined
轴线是否可见
lineColor
Type: string | undefined
轴线颜色
lineWidth
Type: number | undefined
轴线宽度
tick
Type: { visible?: boolean; tickInside?: boolean; tickColor?: string; tickSize?: number; } | undefined
X轴刻度
visible
Type: boolean | undefined
刻度是否可见
tickInside
Type: boolean | undefined
刻度是否朝内
tickColor
Type: string | undefined
刻度颜色
tickSize
Type: number | undefined
刻度尺寸
title
Type: { visible?: boolean; titleText?: string; titleColor?: string; titleFontSize?: number; titleFontWeight?: number; } | undefined
X轴标题
visible
Type: boolean | undefined
标题是否可见
titleText
Type: string | undefined
标题文本, 默认跟随字段配置
titleColor
Type: string | undefined
标题颜色
titleFontSize
Type: number | undefined
标题字体大小
titleFontWeight
Type: number | undefined
标题字体粗细
grid
Type: { visible?: boolean; gridColor?: string; gridWidth?: number; gridLineDash?: number[]; } | undefined
X轴网格线
visible
Type: boolean | undefined
gridColor
Type: string | undefined
网格线颜色
gridWidth
Type: number | undefined
网格线宽度
gridLineDash
Type: number[] | undefined
网格线类型
crosshairLine
Type: CrosshairLine | undefined
垂直提示线
鼠标移动到图表上时, 显示的垂直提示线
十字准星线配置，是一种用于在图表中显示十字准星线（提示线）的配置类型
visible
Type: boolean | undefined
是否显示十字准星线
lineColor
Type: string | undefined
十字准星线颜色
labelColor
Type: string | undefined
十字准星线标签颜色
labelVisible
Type: boolean | undefined
是否显示十字准星线标签
labelBackgroundColor
Type: string | undefined
十字准星线标签背景颜色
theme
Type: Theme | undefined
图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置
内置light与dark两种主题, 用户可以通过Builder自定义主题
主题
内置 light、dark 两种主题, 新的主题可以通过registerTheme自定义主题.
示例 'dark'
'light'
'customThemeName'
length
Type: number
brand
Type: unique symbol
pointStyle
Type: PointStyle | PointStyle[] | undefined
点图元样式
点图元样式配置, 用于定义图表的点图元样式, 包括点图元的颜色, 边框等.
支持全局样式或条件样式配置
数据筛选器
若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力
若未配置selector, 则样式全局生效.
selector
Type: Selector | Selectors | undefined
数据选择器
若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力
若未配置selector, 则样式全局生效.
示例 数值选择器 selector = "tool" selector = ["tool", "book"] selector = 100 selector = [100, 200]
局部数据选择器 selector = { profit: 100 } selector = [{ profit: 100 }, { profit: 200 }]
条件维度选择器 selector = { field: 'category', operator: 'in', value: 'tool' } selector = { field: 'category', operator: 'not in', value: 'book' }
条件指标选择器 selector = { field: 'profit', operator: '>=', value: 100 } selector = { field: 'profit', operator: 'between' value: [100, 300] }
field
Type: string
维度字段, dimensions 某一项的 id
operator
Type: "in" | "not in" | undefined
操作符
- in: 选择数据项中维度字段的值在 value 中的数据项
- not in: 选择数据项中维度字段的值不在 value 中的数据项
op
Type: "in" | "not in" | undefined
操作符
- in: 选择数据项中维度字段的值在 value 中的数据项
- not in: 选择数据项中维度字段的值不在 value 中的数据项
same as operator
value
Type: string | number | (string | number)[]
选择数据项中维度字段的值, 支持数组
pointVisible
Type: boolean | undefined
点是否可见
pointSize
Type: number | undefined
点大小
点大小
pointColor
Type: string | undefined
点图元颜色
点图元颜色
pointColorOpacity
Type: number | undefined
点图元颜色透明度
点图元颜色透明度
pointBorderColor
Type: string | undefined
点图元边框颜色
点图元边框颜色
pointBorderWidth
Type: number | undefined
点图元边框宽度
点图元边框宽度
pointBorderStyle
Type: "solid" | "dashed" | "dotted" | undefined
点图元边框样式
点图元边框样式
示例 solid
dashed
dotted
annotationPoint
Type: AnnotationPoint | AnnotationPoint[] | undefined
标注点
标注点配置, 根据选择的数据, 定义图表的标注点, 包括标注点的位置, 格式, 样式等.
selector
Type: Selector | Selectors | undefined
标注点的选择器, 用于选择数据点.
field
Type: string
维度字段, dimensions 某一项的 id
operator
Type: "in" | "not in" | undefined
操作符
- in: 选择数据项中维度字段的值在 value 中的数据项
- not in: 选择数据项中维度字段的值不在 value 中的数据项
op
Type: "in" | "not in" | undefined
操作符
- in: 选择数据项中维度字段的值在 value 中的数据项
- not in: 选择数据项中维度字段的值不在 value 中的数据项
same as operator
value
Type: string | number | (string | number)[]
选择数据项中维度字段的值, 支持数组
text
Type: string | string[] | undefined
标注的文本
示例 '标注文本'
textColor
Type: string | undefined
文本颜色
示例 'red'
textFontSize
Type: number | undefined
文本字体大小
示例 12
textFontWeight
Type: number | undefined
文本字体重量
示例 400
textAlign
Type: "left" | "right" | "center" | undefined
文本对齐方式, 一般情况下, 设置为right, 文本显示在标注点左侧, 确保显示在图表的可见区域
建议设置为'right', 这样可以确保文本在标注点的左侧
right: 文本在标注点的左侧, 文本的右侧边缘对齐标注点
left: 文本在标注点的右侧, 文本的左侧边缘对齐标注点
center: 文本在标注点的中心, 文本的中心对齐标注点
示例 'right' 文本在标注点的左侧
textBaseline
Type: "top" | "bottom" | "middle" | undefined
文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注点底部, 确保显示在图表的可见区域
建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域
top: 文本在标注点的底部, 文本的顶部边缘对齐标注点
middle: 文本在标注点的中心, 文本的中心对齐标注点
bottom: 文本在标注点的顶部, 文本的底部边缘对齐标注点
示例 'top' 文本在标注点的底部
textBackgroundVisible
Type: boolean | undefined
背景可见
示例 true
textBackgroundColor
Type: string | undefined
背景颜色
示例 'red'
textBackgroundBorderColor
Type: string | undefined
背景边框颜色
示例 'red'
textBackgroundBorderWidth
Type: number | undefined
背景边框宽度
示例 2
textBackgroundBorderRadius
Type: number | undefined
背景边框圆角
示例 4
textBackgroundPadding
Type: number | undefined
背景内边距
示例 4
offsetY
Type: number | undefined
标注点整体在Y方向的偏移像素距离, 当标注点在图表上方(数值较大时)时, 建议设置为正值, 标注点在图表下方(数值较小时)时, 建议设置为负值.
负值则整体向上偏移, 例如设置为-10, 则整个标注点组件包括文本、文本背景, 一起向上偏移10像素
正值则整体向下偏移, 例如设置为10, 则整个标注点组件包括文本、文本背景, 一起向下偏移10像素
示例 offsetY: 5, 标注点整体向下偏移5像素
offsetX
Type: number | undefined
标注点整体在X方向的偏移像素距离, 当标注点在图表左侧(类目轴起点)时, 建议设置为正值, 标注点在图表右侧(类目轴终点)时, 建议设置为负值.
负值则整体向左偏移, 例如设置为-10, 则整个标注点组件包括文本、文本背景, 一起向左偏移10像素
正值则整体向右偏移, 例如设置为10, 则整个标注点组件包括文本、文本背景, 一起向右偏移10像素
示例 offsetX: 5, 标注点整体向右偏移5像素
annotationVerticalLine
Type: AnnotationVerticalLine | AnnotationVerticalLine[] | undefined
标注垂直线
数值标注线(包括均值线、最大值线、最小值线等)，竖直方向展示，能够设置标注线的位置, 样式等，如需绘制x轴度量均值线等数值对应的标注线请使用该配置
xValue
Type: string | number | (string | number)[] | undefined
固定的x值, 用于标注垂直线, 类目轴在x方向, 则可输入维值, 数值轴在x方向, 则可输入具体的数值
text
Type: string | string[] | undefined
标注的文本
示例 '标注文本'
textPosition
Type: "outsideStart" | "outsideEnd" | "outsideMiddle" | "insideStart" | "insideMiddle" | "insideEnd" | undefined
文本位置, 标注线的标签位置（标签相对线的相对位置）。
示例 'outsideEnd'
textColor
Type: string | undefined
文本颜色
示例 'red'
textFontSize
Type: number | undefined
文本字体大小
示例 12
textFontWeight
Type: number | undefined
文本字体重量
示例 400
textAlign
Type: "left" | "right" | "center" | undefined
文本对齐方式, 一般情况下, 无需设置
建议设置为'right', 这样可以确保文本在标注线的左侧
right: 文本在参考线的左侧, 文本的右侧边缘对齐(垂直)标注线
left: 文本在参考线的右侧, 文本的左侧边缘对齐(垂直)标注线
center: 文本在参考线的中心, 文本的中心对齐(垂直)标注线
示例 'right'
textBaseline
Type: "top" | "bottom" | "middle" | undefined
文本垂直对齐方式, 一般情况下, 无需设置
建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域
top: 文本在参考线的底部, 文本的顶部边缘对齐(垂直)标注线的终点
middle: 文本在参考线的中心, 文本的中心对齐(垂直)标注线的终点
bottom: 文本在参考线的顶部, 文本的底部边缘对齐(垂直)标注线的终点
示例 'top'
lineVisible
Type: boolean | undefined
线可见
示例 true
lineColor
Type: string | undefined
线颜色
示例 'red'
lineWidth
Type: number | undefined
线宽度
示例 2
lineStyle
Type: "solid" | "dashed" | "dotted" | undefined
线样式
示例 'solid'
textBackgroundVisible
Type: boolean | undefined
背景可见
示例 true
textBackgroundColor
Type: string | undefined
背景颜色
示例 'red'
textBackgroundBorderColor
Type: string | undefined
背景边框颜色
示例 'red'
textBackgroundBorderWidth
Type: number | undefined
背景边框宽度
示例 2
textBackgroundBorderRadius
Type: number | undefined
背景边框圆角
示例 4
textBackgroundPadding
Type: number | undefined
背景内边距
示例 4
annotationHorizontalLine
Type: AnnotationHorizontalLine | AnnotationHorizontalLine[] | undefined
标注水平线
数值标注线(包括均值线、最大值线、最小值线等)，竖直方向展示，能够设置标注线的位置, 样式等，如需绘制y轴度量均值线等数值对应的标注线请使用该配置
yValue
Type: string | number | (string | number)[] | undefined
固定的y值, 用于标注水平线, 类目轴在y方向, 则可输入维值, 数值轴在y方向, 则可输入具体的数值
text
Type: string | string[] | undefined
标注的文本
示例 '标注文本'
textPosition
Type: "outsideStart" | "outsideEnd" | "outsideMiddle" | "insideStart" | "insideMiddle" | "insideEnd" | undefined
文本位置
标注线的标签位置（标签相对线的相对位置）。
示例 'outsideEnd'
textColor
Type: string | undefined
文本颜色
示例 'red'
textFontSize
Type: number | undefined
文本字体大小
示例 12
textFontWeight
Type: number | undefined
文本字体重量
示例 400
textAlign
Type: "left" | "right" | "center" | undefined
文本对齐方式, 一般情况下, 无需设置
建议设置为'right', 这样可以确保文本在标注线的左侧
right: 文本在参考线的左侧, 文本的右侧边缘对齐(水平)标注线的终点
left: 文本在参考线的右侧, 文本的左侧边缘对齐(水平)标注线的终点
center: 文本在参考线的中心, 文本的中心对齐(水平)标注线的终点
示例 'right'
textBaseline
Type: "top" | "bottom" | "middle" | undefined
文本垂直对齐方式, 一般情况下, 无需设置
建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域
top: 文本在参考线的底部, 文本的顶部边缘对齐(水平)标注线
middle: 文本在参考线的中心, 文本的中心对齐(水平)标注线
bottom: 文本在参考线的顶部, 文本的底部边缘对齐(水平)标注线
示例 'top'
textBackgroundVisible
Type: boolean | undefined
背景可见
示例 true
textBackgroundColor
Type: string | undefined
背景颜色
示例 'red'
textBackgroundBorderColor
Type: string | undefined
背景边框颜色
示例 'red'
textBackgroundBorderWidth
Type: number | undefined
背景边框宽度
背景边框宽度
示例 2
textBackgroundBorderRadius
Type: number | undefined
背景边框圆角
示例 4
textBackgroundPadding
Type: number | undefined
背景内边距
示例 4
lineVisible
Type: boolean | undefined
线可见
线可见
示例 true
lineColor
Type: string | undefined
线颜色
示例 'red'
lineWidth
Type: number | undefined
线宽度
示例 2
lineStyle
Type: "solid" | "dashed" | "dotted" | undefined
线样式
示例 'solid'
splitLine
Type: boolean | { positiveColor?: string; negativeColor?: string; } | undefined
是否开启将主线分隔成两段的功能
positiveColor
Type: string | undefined
大于标注值的部分，对应的主色
negativeColor
Type: string | undefined
小于标注值的部分，对应的主色
annotationArea
Type: AnnotationArea | AnnotationArea[] | undefined
标注区域
标注区域配置, 根据选择的数据, 定义图表的标注区域, 包括标注区域的位置, 样式等.
selector
Type: AreaSelector | AreaSelectors | undefined
依赖选择的数据, 进行数据标记.
field
Type: string
维度字段, dimensions 某一项的 id
operator
Type: "in" | "not in" | undefined
操作符
- in: 选择数据项中维度字段的值在 value 中的数据项
- not in: 选择数据项中维度字段的值不在 value 中的数据项
op
Type: "in" | "not in" | undefined
操作符
- in: 选择数据项中维度字段的值在 value 中的数据项
- not in: 选择数据项中维度字段的值不在 value 中的数据项
same as operator
value
Type: string | number | (string | number)[]
选择数据项中维度字段的值, 支持数组
text
Type: string | string[] | undefined
标注的文本
示例 '标注文本'
textPosition
Type: "left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight" | undefined
文本位置
示例 'top'
textColor
Type: string | undefined
文本颜色
示例 'red'
textFontSize
Type: number | undefined
文本字体大小
示例 12
textFontWeight
Type: number | undefined
文本字体重量
示例 400
textAlign
Type: "left" | "right" | "center" | undefined
文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域
建议设置为'center', 这样可以确保文本在标注区域的中间
right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域
left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域
center: 文本在标注区域的中心, 文本的中心对齐标注区域
示例 'center' 文本在标注区域的中间
textBaseline
Type: "top" | "bottom" | "middle" | undefined
文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域
建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域
top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域
middle: 文本在标注区域的中心, 文本的中心对齐标注区域
bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域
示例 'top' 文本在标注区域的底部
textBackgroundVisible
Type: boolean | undefined
背景可见
示例 true
textBackgroundColor
Type: string | undefined
背景颜色
示例 'red'
textBackgroundBorderColor
Type: string | undefined
背景边框颜色
背景边框颜色
示例 'red'
textBackgroundBorderWidth
Type: number | undefined
背景边框宽度
示例 2
textBackgroundBorderRadius
Type: number | undefined
背景边框圆角
背景边框圆角
示例 4
textBackgroundPadding
Type: number | undefined
背景内边距
示例 4
areaColor
Type: string | undefined
标注区域区域颜色
示例 'red'
areaColorOpacity
Type: number | undefined
标注区域区域颜色透明度
示例 0.5
areaBorderColor
Type: string | undefined
标注区域区域边框颜色
示例 'red'
areaBorderWidth
Type: number | undefined
标注区域区域边框宽度
示例 2
areaBorderRadius
Type: number | undefined
标注区域区域边框圆角
示例 4
areaLineDash
Type: number[] | undefined
标注区域区域边框的线型
示例 [2, 2]
outerPadding
Type: number | undefined
标注区域区域的边距
示例 0
linearRegressionLine
Type: LinearRegressionLine | LinearRegressionLine[] | undefined
线性回归线
线性回归线配置, 包括线性回归线的样式等.
enable
Type: boolean | undefined
是否开启
color
Type: string | undefined
回归线颜色
用于设置回归线的颜色，如果不设置，默认使用图表的主颜色
lineWidth
Type: number | undefined
回归线宽度
用于设置回归线的宽度，单位为像素，默认值为1
lineDash
Type: number[] | undefined
回归线样式
用于设置回归线的样式，例如实线、虚线等，默认值为实线
text
Type: string | undefined
回归线标签文本
用于设置回归线的标签文本，空字符串表示不显示标签
textColor
Type: string | undefined
文本颜色
示例 'red'
textFontSize
Type: number | undefined
文本字体大小
示例 12
textFontWeight
Type: number | undefined
文本字体重量
示例 400
confidenceIntervalVisible
Type: boolean | undefined
是否显示置信区间
confidenceLevel
Type: number | undefined
置信区间数值设定，默认95%置信度
confidenceIntervalColor
Type: string | undefined
置信区间颜色
confidenceIntervalOpacity
Type: number | undefined
置信区间透明度
示例 0.5
shadowBlur
Type: number | undefined
图形模糊效果程度
示例 0
shadowColor
Type: string | undefined
图形的阴影颜色
示例 '#FFFFFF4D'
shadowOffsetX
Type: number | undefined
阴影水平偏移距离
示例 0
shadowOffsetY
Type: number | undefined
阴影垂直偏移距离
示例 1
lowessRegressionLine
Type: LowessRegressionLine | LowessRegressionLine[] | undefined
局部加权回归线配置项
局部加权回归线配置项, 包括局部加权回归线的样式等.
enable
Type: boolean | undefined
是否开启
color
Type: string | undefined
回归线颜色
用于设置回归线的颜色，如果不设置，默认使用图表的主颜色
lineWidth
Type: number | undefined
回归线宽度
用于设置回归线的宽度，单位为像素，默认值为1
lineDash
Type: number[] | undefined
回归线样式
用于设置回归线的样式，例如实线、虚线等，默认值为实线
text
Type: string | undefined
回归线标签文本
用于设置回归线的标签文本，空字符串表示不显示标签
textColor
Type: string | undefined
文本颜色
示例 'red'
textFontSize
Type: number | undefined
文本字体大小
示例 12
textFontWeight
Type: number | undefined
文本字体重量
示例 400
confidenceIntervalVisible
Type: boolean | undefined
是否显示置信区间
confidenceLevel
Type: number | undefined
置信区间数值设定，默认95%置信度
confidenceIntervalColor
Type: string | undefined
置信区间颜色
confidenceIntervalOpacity
Type: number | undefined
置信区间透明度
示例 0.5
polynomialRegressionLine
Type: PolynomialRegressionLine | PolynomialRegressionLine[] | undefined
多项式回归线
多项式回归线配置, 包括多项式的阶数、回归线的样式等.
enable
Type: boolean | undefined
是否开启
color
Type: string | undefined
回归线颜色
用于设置回归线的颜色，如果不设置，默认使用图表的主颜色
degree
Type: number | undefined
多项式回归的阶数
lineWidth
Type: number | undefined
回归线宽度
用于设置回归线的宽度，单位为像素，默认值为1
lineDash
Type: number[] | undefined
回归线样式
用于设置回归线的样式，例如实线、虚线等，默认值为实线
text
Type: string | undefined
回归线标签文本
用于设置回归线的标签文本，空字符串表示不显示标签
textColor
Type: string | undefined
文本颜色
示例 'red'
textFontSize
Type: number | undefined
文本字体大小
示例 12
textFontWeight
Type: number | undefined
文本字体重量
示例 400
confidenceIntervalVisible
Type: boolean | undefined
是否显示置信区间
confidenceLevel
Type: number | undefined
置信区间数值设定，默认95%置信度
confidenceIntervalColor
Type: string | undefined
置信区间颜色
confidenceIntervalOpacity
Type: number | undefined
置信区间透明度
示例 0.5
logisticRegressionLine
Type: LogisticRegressionLine | LogisticRegressionLine[] | undefined
逻辑回归线
逻辑回归线配置, 包括逻辑回归线的样式等.
enable
Type: boolean | undefined
是否开启
color
Type: string | undefined
回归线颜色
用于设置回归线的颜色，如果不设置，默认使用图表的主颜色
lineWidth
Type: number | undefined
回归线宽度
用于设置回归线的宽度，单位为像素，默认值为1
lineDash
Type: number[] | undefined
回归线样式
用于设置回归线的样式，例如实线、虚线等，默认值为实线
text
Type: string | undefined
回归线标签文本
用于设置回归线的标签文本，空字符串表示不显示标签
textColor
Type: string | undefined
文本颜色
示例 'red'
textFontSize
Type: number | undefined
文本字体大小
示例 12
textFontWeight
Type: number | undefined
文本字体重量
示例 400
confidenceIntervalVisible
Type: boolean | undefined
是否显示置信区间
confidenceLevel
Type: number | undefined
置信区间数值设定，默认95%置信度
confidenceIntervalColor
Type: string | undefined
置信区间颜色
confidenceIntervalOpacity
Type: number | undefined
置信区间透明度
示例 0.5
dimensionLinkage
Type: DimensionLinkage | undefined
当图表开启透视功能或者指标组合的是否，是否开启维度联动功能
当hover 到某个维度值时，联动高亮其他图表中相同维度值的数据
透视图表维度联动配置
enable
Type: false | true
是否开启透视图表维度联动
showTooltip
Type: boolean | undefined
是否显示所有维度对应子图表的Tooltip提示信息
showLabel
Type: boolean | undefined
是否显示crosshair 对应的标签
locale
Type: Locale | undefined
语言
图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言