RayChart

Appearance

折线图 ​

3D 折线图展示数据随时间或类别的变化趋势，通过立体线条和数据点呈现连续变化。

快速开始 ​

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

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

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

核心配置 ​

属性类型默认值说明
lineStyle.widthnumber0.5线条粗细（3D 管道的半径）
lineStyle.colorstring自动分配线条颜色
smoothbooleantrue是否平滑曲线；false 时渲染为直线折线
pointStyle.sizenumber线条半径 × 1.5数据点球体大小
pointStyle.colorstring线条颜色变体数据点颜色
areaStyle.colorstring线条颜色是否渲染区域填充（配置即启用）
series.labelobject不显示数据点标签

常见场景 ​

平滑曲线与区域填充 ​

vue
<script setup>
const chartOption = ref({
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    smooth: true,                    // 平滑曲线（默认）
    lineStyle: { width: 0.3, color: '#5470c6' },   // 线条粗细与颜色
    pointStyle: { size: 0.8 },       // 数据点大小
    areaStyle: { color: 'rgba(84, 112, 198, 0.25)' },  // 区域填充
    label: { show: true, fontSize: 12 }  // 数据点标签
  }],
  xAxis3D: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
})
</script>

多系列支持

与柱状图一致，RayLine 只渲染 series[0]，暂不支持同图多系列；多组数据请拆分为多个图表展示。

组件属性 ​

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

相关文档 ​

基础学习 ​

进阶主题 ​

API 参考 ​

其他图表类型 ​

在线示例 ​