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],
    lineWidth: 0.3,
    smooth: true
  }],
  xAxis3D: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
})
</script>

核心配置 ​

属性类型默认值说明
lineWidthnumber0.2线条宽度
smoothbooleanfalse是否平滑曲线
showSymbolbooleantrue是否显示数据点
symbolSizenumber0.5数据点大小

常见场景 ​

多系列对比 ​

vue
<script setup>
const chartOption = ref({
  series: [
    { name: '2023', data: [120, 200, 150, 80, 70, 110, 130] },
    { name: '2024', data: [150, 230, 180, 90, 85, 120, 140] }
  ],
  xAxis3D: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
})
</script>

自动配色

多系列折线图会自动分配不同颜色，无需手动配置。

平滑曲线 ​

vue
<script setup>
const chartOption = ref({
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    smooth: true,        // 启用平滑
    lineWidth: 0.3,      // 线条宽度
    showSymbol: true,    // 显示数据点
    symbolSize: 0.5      // 数据点大小
  }],
  xAxis3D: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
})
</script>

组件属性 ​

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

相关文档 ​