RayChart

Appearance

散点图 ​

3D 散点图展示三维空间数据分布，通过立体散点位置呈现数据在三个维度上的关系。

快速开始 ​

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

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

const chartOption = ref({
  series: [{
    data: [
      [1, 2, 3],
      [2, 3, 4],
      [3, 4, 5],
      [4, 5, 6],
      [5, 6, 7]
    ],
    symbolSize: 0.5
  }],
  xAxis3D: {},
  yAxis3D: {},
  zAxis3D: {}
})
</script>

数据格式

散点图数据为三维数组 [x, y, z]，分别对应 X、Y、Z 轴的坐标值。

核心配置 ​

属性类型默认值说明
symbolSizenumber0.5散点大小
itemStyleobject-散点样式配置

常见场景 ​

多系列散点 ​

vue
<script setup>
const chartOption = ref({
  series: [
    {
      name: '类别A',
      data: [[1, 2, 3], [2, 3, 4], [3, 4, 5]],
      symbolSize: 0.5
    },
    {
      name: '类别B',
      data: [[4, 5, 6], [5, 6, 7], [6, 7, 8]],
      symbolSize: 0.6
    }
  ],
  xAxis3D: {},
  yAxis3D: {},
  zAxis3D: {}
})
</script>

自定义样式 ​

vue
<script setup>
const chartOption = ref({
  series: [{
    data: [[1, 2, 3], [2, 3, 4], [3, 4, 5]],
    symbolSize: 0.8,
    itemStyle: {
      metalness: 0.3,
      roughness: 0.5,
      emissive: '#42b883',
      emissiveIntensity: 0.3
    }
  }],
  xAxis3D: {},
  yAxis3D: {},
  zAxis3D: {}
})
</script>

组件属性 ​

属性类型默认值说明
optionRayChartOption-图表配置对象（必填）
widthstring | number'100%'图表宽度
heightstring | number'600px'图表高度

相关文档 ​