RayChart

Appearance

坐标系统 ​

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

💡 大多数情况

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

笛卡尔坐标系 ​

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

快速开始 ​

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

坐标轴类型 ​

类型说明示例
category类别轴 - 离散数据星期、月份、产品名称
value数值轴 - 连续数据销售额、温度、数量
time时间轴 - 时间序列日期、时间戳
log对数轴 - 跨度大的数值人口数、GDP
javascript
xAxis3D: {
  type: 'category',
  data: ['类别1', '类别2', '类别3']
}
javascript
yAxis3D: {
  type: 'value',
  min: 0,
  max: 100
}
javascript
xAxis3D: {
  type: 'time'
}
javascript
yAxis3D: {
  type: 'log',
  logBase: 10
}

常用配置 ​

轴线和标签样式
javascript
xAxis3D: {
  name: 'X 轴',
  axisLine: {
    show: true,
    lineStyle: {
      color: '#333',
      width: 1
    }
  },
  axisLabel: {
    show: true,
    fontSize: 12,
    color: '#666'
  }
}

其他坐标系 ​

极坐标系 ​

用于饼图、雷达图等圆形布局。

javascript
{
  radar: {
    indicator: [
      { name: '销售', max: 6500 },
      { name: '管理', max: 16000 }
    ],
    shape: 'polygon'  // 或 'circle'
  }
}

地理坐标系 ​

用于 3D 地图。

javascript
{
  geo3D: {
    map: 'china',
    itemStyle: {
      color: '#42b883'
    }
  }
}

相关文档 ​