RayChart

Appearance

坐标系统 ​

RayChart 支持多种坐标系统，适配不同的数据可视化需求。

大多数情况

使用笛卡尔坐标系（柱状图、折线图、散点图）即可，无需深入了解坐标系统。

笛卡尔坐标系 ​

最常用的坐标系统，用于柱状图、折线图、散点图。

快速开始 ​

vue
<script setup>
const chartOption = ref({
  series: [{ data: [120, 200, 150] }],
  xAxis3D: {
    data: ['Mon', 'Tue', 'Wed']
  }
})
</script>

轴类型说明 ​

RayChart 的坐标轴分工明确：

轴类型说明
X 轴 / Z 轴类别轴离散类别（如星期、月份），数据按位置等宽排布
Y 轴数值轴连续数值，默认根据数据自动计算范围

注意

X/Z 轴仅支持类别轴（内部使用 scaleBand 实现），type: 'value' / 'time' / 'log' 等配置会被忽略。

数值轴范围 ​

Y 轴范围默认根据数据自动计算，也可手动指定：

javascript
yAxis3D: {
  min: 0,     // 最小值
  max: 100,   // 最大值
  name: '销售额'
}

数据窗口（window） ​

数据量超出单屏容量时，图表会自动启用滚动窗口（默认单屏约 12 个类别，由 grid3D.boxWidth 与最小带宽决定），只渲染窗口内的数据：

javascript
xAxis3D: {
  data: ['A', 'B', 'C', ...],  // 完整数据
  window: {
    enabled: true,   // 启用窗口（超出容量时自动启用）
    size: 10,        // 窗口大小（一次显示的类别数）
    offset: 0        // 窗口偏移（从第几个类别开始显示）
  }
}

实时数据

实时追加数据时，建议将应用层数据裁剪到与 window.size 一致，避免窗口偏移导致看不到最新数据（见数据更新）。

轴线和标签样式 ​

javascript
xAxis3D: {
  data: ['A', 'B', 'C'],

  // 轴线样式
  axisLine: {
    show: true,
    lineStyle: {
      color: '#333',
      width: 1
    }
  },

  // 标签样式（文字样式放在 textStyle 中）
  axisLabel: {
    show: true,
    textStyle: {
      fontSize: 12,
      color: '#666'
    }
  }
}

极坐标系 ​

用于饼图、雷达图等圆形布局。雷达图通过 radar 配置指标：

javascript
{
  radar: {
    indicator: [
      { name: '销售', max: 6500 },
      { name: '管理', max: 16000 },
      { name: '技术', max: 30000 }
    ],
    radius: 8,          // 雷达半径
    splitNumber: 5,     // 刻度圈数
    center: [0, 0]      // 中心位置（网格坐标）
  },
  series: [{
    data: [4200, 15000, 28000]
  }]
}

地理坐标系 ​

用于 3D 地图，通过 map3D 配置 GeoJSON 数据源：

javascript
{
  map3D: {
    geojsonUrl: 'https://geojson.raychart.cn/china.json',  // 或直接传入 geojson
    center: [104, 36],   // 投影中心经纬度
    scale: 1,            // 投影缩放
    viewRatio: 0.8       // 地图占视口比例
  },
  series: [{
    type: 'map3D',
    data: [
      { name: '北京', value: 100 },
      { name: '上海', value: 200 }
    ]
  }]
}

完整的地图配置（钻取、图层、视角限制等）见 3D 地图。

相关文档 ​