ScatterChart 散点图

    用于展示二维坐标的离散点分布，支持分类与二级筛选，含响应式优化。

    代码演示

    工具栏过滤器
    统计指标
    暗黑主题

    API

    ScatterChartProps

    属性说明类型默认值版本
    data扁平化数据数组ScatterChartDataItem[]--
    title图表标题string--
    width宽度（px），移动端自适应为 100%number | string800-
    height高度（px），移动端最大约 80% 屏宽（上限 400）number | string600-
    className自定义类名string--
    toolbarExtra头部工具条额外按钮React.ReactNode--
    renderFilterInToolbar是否将过滤器渲染到工具栏（当为 true 时，ChartFilter 会显示在工具栏右侧）booleanfalse-
    dataTime数据时间string--
    theme图表与容器主题；dark 时容器内嵌 Ant Design 暗色算法；图例为实心色块并与折线图一致'dark' | 'light''light'-
    xUnitX 轴单位string'月'-
    yUnitY 轴单位string--
    xAxisLabelX 轴标签string--
    yAxisLabelY 轴标签string--
    xPositionX 轴位置'top' | 'bottom''bottom'-
    yPositionY 轴位置'left' | 'right''left'-
    hiddenX是否隐藏 X 轴booleanfalse-
    hiddenY是否隐藏 Y 轴booleanfalse-
    showGrid是否显示网格线booleantrue-
    color自定义主色；数组按序对应各数据序列string | string[]--
    textMaxWidth图例文字最大宽度（px），超出截断并加省略号number80-
    statistic指标卡配置，单个对象或数组ChartStatisticConfig | ChartStatisticConfig[]--
    xMinX 轴最小值；不传时从数据自动推算（含 10% 边距）number--
    xMaxX 轴最大值；不传时从数据自动推算（含 10% 边距）number--
    yMinY 轴最小值；不传时从数据自动推算（含 10% 边距）number--
    yMaxY 轴最大值；不传时从数据自动推算（含 10% 边距）number--

    ChartContainerProps（继承）

    属性说明类型默认值版本
    classNames分层类名：root、toolbar、statisticContainer、filter、wrapper、chartChartClassNames--
    loading加载态booleanfalse-
    style根容器内联样式React.CSSProperties--
    styles与各层 DOM 对应的内联样式ChartStyles--
    variant容器描边变体'outline' | 'borderless'--

    ScatterChartDataItem

    字段说明类型默认值版本
    category分类（用于外层筛选）string--
    type数据序列名称（映射为 dataset）string--
    x横坐标（必填）number | string--
    y纵坐标（必填）number | string--
    filterLabel二级筛选标签（可选，支持"全部"）string--

    ChartStatisticConfig

    ChartStatisticConfig 继承自 ChartStatistic 组件的所有属性，详细 API 请参考 ChartStatistic 文档。

    字段说明类型默认值版本
    title指标标题string--
    tooltip鼠标悬停时显示的提示信息string--
    value显示的数值number | string | null | undefined--
    precision数值精度（小数点后位数）number--
    groupSeparator千分位分隔符string','-
    prefix数值前缀（如货币符号）string''-
    suffix数值后缀（如单位）string''-
    formatter自定义格式化函数，优先级高于其他格式化选项(value: number | string | null | undefined) => React.ReactNode--
    className自定义类名string''-
    size组件尺寸'small' | 'default' | 'large''default'-
    block是否使用块级布局（弹性占用空间，多个时平分父容器宽度）booleanfalse-
    extra右上角自定义内容（图标、按钮等）React.ReactNode--

    说明

    • 移动端会减小点的半径与 hover 半径以提升观感。
    • hiddenX 和 hiddenY 可以控制坐标轴的显示/隐藏，适用于只展示图表本身而不需要坐标轴的场景。
    • 坐标轴范围默认根据实际数据自动推算，并附加约 10% 的边距以确保边界点可见。可通过 xMin/xMax/yMin/yMax 固定范围，如需 Y 轴固定 0–100 可传 yMin={0} yMax={100}。
    • 刻度步长（stepSize）同样依据范围自动计算，大范围数据（如 x: 1–4892, y: 1000–25000）会自动选用合适的步长，无需手动配置。