散点图

3D 散点图在 X 轴类别位置上以球体高度呈现数值，适合观察数据分布、离群点与稀疏度。

与「3D 散点图 XYZ」的区别

RayScatter3D 是类别轴散点图：数据是一维数值，X 轴为离散类别。若需要真正的三维坐标点 [x, y, z]，请使用 3D 散点图 XYZ（RayScatter3DXyz）。

快速开始

vue

<template>
  <RayScatter3D :option="chartOption" />
</template>

<script setup>
import { ref } from 'vue'
import { RayScatter3D } from 'raychart'

const chartOption = ref({
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130]
  }],
  xAxis3D: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
})
</script>

数据格式

series.data 是一维数值数组，与 xAxis3D.data 的类别一一对应（按索引对齐）。散点半径固定为 0.5，不支持 symbolSize 调整。

核心配置

属性	类型	默认值	说明
`series.data`	`number[]`	-	散点数值（必填）
`xAxis3D.data`	`string[]`	-	X 轴类别（必填）
`series.color`	`string[]`	自动分配	散点颜色，按索引轮转
`series.label`	`object`	不显示	散点标签，如 `{ show: true, fontSize: 12 }`
`series.itemStyle`	`object`	-	材质样式（金属度、粗糙度等）

常见场景

自定义颜色与材质

vue

<script setup>
const chartOption = ref({
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    color: ['#42b883'],
    itemStyle: {
      metalness: 0.3,
      roughness: 0.5
    },
    label: { show: true, fontSize: 12 }
  }],
  xAxis3D: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
})
</script>

组件属性

属性	类型	默认值	说明
`option`	`RayChartOption`	-	图表配置对象（必填）
`width`	`string \| number`	`'100%'`	图表宽度
`height`	`string \| number`	`'600px'`	图表高度

散点图

快速开始

核心配置

常见场景

自定义颜色与材质

组件属性

相关文档

基础学习

进阶主题

其他图表类型

在线示例

散点图 ​

快速开始 ​

核心配置 ​

常见场景 ​

自定义颜色与材质 ​

组件属性 ​

相关文档 ​

基础学习 ​

进阶主题 ​

其他图表类型 ​

在线示例 ​

散点图

快速开始

核心配置

常见场景

自定义颜色与材质

组件属性

相关文档

基础学习

进阶主题

其他图表类型

在线示例