@vela-studio/ui 1.0.1

package/src/components/chart/funnelChart/funnelChart.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="v-funnel-chart" :style="{ width: '100%', height: '100%' }">
+    <v-chart :option="finalOption" autoresize class="echart" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { FunnelChart } from 'echarts/charts'
+import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import VChart from 'vue-echarts'
+import type { EChartsOption } from 'echarts'
+
+// 注册 ECharts 组件
+use([TitleComponent, TooltipComponent, LegendComponent, FunnelChart, CanvasRenderer])
+
+// 定义标准的 Props，不含任何业务逻辑 ID
+const props = defineProps<{
+  // 基础数据 Props
+  data?: Array<{ name: string; value: number }>
+
+  // 样式配置 Props
+  title?: string
+  seriesName?: string
+  left?: string
+  top?: string
+  bottom?: string
+  width?: string
+  min?: number
+  max?: number
+  minSize?: string
+  maxSize?: string
+  sort?: 'descending' | 'ascending' | 'none'
+  gap?: number
+  showLabel?: boolean
+  labelPosition?: 'left' | 'right' | 'inside'
+  labelFormatter?: string
+  showLabelLine?: boolean
+  labelLineLength?: number
+  borderColor?: string
+  borderWidth?: number
+
+  // 高级覆盖
+  option?: EChartsOption
+}>()
+
+// 默认值配置
+const defaultData = [
+  { name: '展示', value: 100 },
+  { name: '访问', value: 80 },
+  { name: '咨询', value: 60 },
+  { name: '订单', value: 40 },
+  { name: '成交', value: 20 },
+]
+
+// 计算最终 Option
+const finalOption = computed<EChartsOption>(() => {
+  // 如果有高级配置 option，优先使用
+  if (props.option && Object.keys(props.option).length > 0) return props.option
+
+  const data = props.data && props.data.length ? props.data : defaultData
+  const seriesName = props.seriesName || 'Funnel'
+
+  return {
+    title: {
+      text: props.title || '',
+      left: 'center',
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c}',
+    },
+    legend: {
+      bottom: 10,
+      data: data.map((d) => d.name),
+    },
+    series: [
+      {
+        name: seriesName,
+        type: 'funnel',
+        left: props.left || '10%',
+        top: props.top || '20%',
+        bottom: props.bottom || '20%',
+        width: props.width || '80%',
+        min: props.min || 0,
+        max: props.max || 100,
+        minSize: props.minSize || '0%',
+        maxSize: props.maxSize || '100%',
+        sort: props.sort || 'descending',
+        gap: props.gap || 2,
+        label: {
+          show: props.showLabel !== false,
+          position: props.labelPosition || 'inside',
+          formatter: props.labelFormatter || '{b}: {c}',
+        },
+        labelLine: {
+          show: props.showLabelLine !== false,
+          length: props.labelLineLength || 10,
+        },
+        itemStyle: {
+          borderColor: props.borderColor || '#fff',
+          borderWidth: props.borderWidth || 1,
+        },
+        emphasis: {
+          label: {
+            fontSize: 20,
+          },
+        },
+        data: data,
+      },
+    ],
+  }
+})
+</script>
+
+<style scoped>
+.v-funnel-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/chart/gaugeChart/gaugeChart.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="v-gauge-chart" :style="{ width: '100%', height: '100%' }">
+    <v-chart :option="finalOption" autoresize class="echart" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { GaugeChart } from 'echarts/charts'
+import { TitleComponent, TooltipComponent } from 'echarts/components'
+import VChart from 'vue-echarts'
+import type { EChartsOption } from 'echarts'
+
+// 注册 ECharts 组件
+use([TitleComponent, TooltipComponent, GaugeChart, CanvasRenderer])
+
+// 定义标准的 Props，不含任何业务逻辑 ID
+const props = defineProps<{
+  // 基础数据 Props
+  value?: number
+  name?: string
+  min?: number
+  max?: number
+
+  // 样式配置 Props
+  title?: string
+  startAngle?: number
+  endAngle?: number
+  splitNumber?: number
+  showProgress?: boolean
+  progressWidth?: number
+  axisLineWidth?: number
+  axisLineColor?: Array<[number, string]>
+  pointerColor?: string
+  pointerLength?: string
+  pointerWidth?: number
+  showAxisTick?: boolean
+  axisTickSplitNumber?: number
+  showSplitLine?: boolean
+  splitLineLength?: number
+  showAxisLabel?: boolean
+  axisLabelDistance?: number
+  axisLabelFontSize?: number
+  detailFormatter?: string
+  detailFontSize?: number
+  detailOffsetX?: string
+  detailOffsetY?: string
+
+  // 高级覆盖
+  option?: EChartsOption
+}>()
+
+// 计算最终 Option
+const finalOption = computed<EChartsOption>(() => {
+  // 如果有高级配置 option，优先使用
+  if (props.option && Object.keys(props.option).length > 0) return props.option
+
+  const value = props.value ?? 75
+  const name = props.name || 'Progress'
+  const min = props.min ?? 0
+  const max = props.max ?? 100
+
+  return {
+    title: {
+      text: props.title || '',
+      left: 'center',
+    },
+    tooltip: {
+      formatter: '{b}: {c}',
+    },
+    series: [
+      {
+        name: name,
+        type: 'gauge',
+        min: min,
+        max: max,
+        startAngle: props.startAngle || 225,
+        endAngle: props.endAngle || -45,
+        splitNumber: props.splitNumber || 10,
+        progress: {
+          show: props.showProgress !== false,
+          width: props.progressWidth || 10,
+        },
+        axisLine: {
+          lineStyle: {
+            width: props.axisLineWidth || 10,
+            color: props.axisLineColor || [
+              [0.3, '#67e0e3'],
+              [0.7, '#37a2da'],
+              [1, '#fd666d'],
+            ],
+          },
+        },
+        pointer: {
+          itemStyle: {
+            color: props.pointerColor || 'auto',
+          },
+          length: props.pointerLength || '70%',
+          width: props.pointerWidth || 8,
+        },
+        axisTick: {
+          show: props.showAxisTick !== false,
+          splitNumber: props.axisTickSplitNumber || 5,
+        },
+        splitLine: {
+          show: props.showSplitLine !== false,
+          length: props.splitLineLength || 15,
+        },
+        axisLabel: {
+          show: props.showAxisLabel !== false,
+          distance: props.axisLabelDistance || 25,
+          fontSize: props.axisLabelFontSize || 12,
+        },
+        detail: {
+          valueAnimation: true,
+          formatter: props.detailFormatter || '{value}',
+          fontSize: props.detailFontSize || 20,
+          offsetCenter: [props.detailOffsetX || '0%', props.detailOffsetY || '70%'],
+        },
+        data: [
+          {
+            value: value,
+            name: name,
+          },
+        ],
+      },
+    ],
+  }
+})
+</script>
+
+<style scoped>
+.v-gauge-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/chart/lineChart/lineChart.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="v-line-chart" :style="{ width: '100%', height: '100%' }">
+    <v-chart :option="finalOption" autoresize class="echart" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+} from 'echarts/components'
+import VChart from 'vue-echarts'
+import type { EChartsOption } from 'echarts'
+
+// 注册 ECharts 组件
+use([TitleComponent, TooltipComponent, GridComponent, LegendComponent, LineChart, CanvasRenderer])
+
+// 定义标准的 Props，不含任何业务逻辑 ID
+const props = defineProps<{
+  // 基础数据 Props
+  data?: number[]
+  xAxisData?: string[]
+  seriesName?: string
+
+  // 样式配置 Props
+  title?: string
+  lineColor?: string
+  smooth?: boolean
+  showArea?: boolean
+  showTooltip?: boolean
+  showLegend?: boolean
+  legendPosition?: 'top' | 'bottom' | 'left' | 'right'
+  showGrid?: boolean
+  xAxisName?: string
+  yAxisName?: string
+  showXAxisLine?: boolean
+  showXAxisLabel?: boolean
+  showYAxisLine?: boolean
+  showYAxisLabel?: boolean
+  symbolSize?: number
+  lineWidth?: number
+  lineType?: 'solid' | 'dashed' | 'dotted'
+  areaOpacity?: number
+  showSymbol?: boolean
+
+  // 高级覆盖
+  option?: EChartsOption
+}>()
+
+// 默认值配置
+const defaultData = [150, 230, 224, 218, 135, 147, 260]
+const defaultXAxis = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+
+// 计算最终 Option
+const finalOption = computed<EChartsOption>(() => {
+  // 如果有高级配置 option，优先使用
+  if (props.option && Object.keys(props.option).length > 0) return props.option
+
+  const data = props.data && props.data.length ? props.data : defaultData
+  const xAxisData = props.xAxisData && props.xAxisData.length ? props.xAxisData : defaultXAxis
+  const seriesName = props.seriesName || 'Series'
+
+  return {
+    // 标题
+    title: props.title
+      ? {
+          text: props.title,
+          left: 'center',
+          textStyle: {
+            fontSize: 16,
+          },
+        }
+      : undefined,
+
+    // 提示框
+    tooltip:
+      props.showTooltip !== false
+        ? {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross',
+              label: {
+                backgroundColor: '#6a7985',
+              },
+            },
+          }
+        : undefined,
+
+    // 图例
+    legend:
+      props.showLegend !== false
+        ? {
+            [(props.legendPosition as string) || 'top']: 10,
+            data: [seriesName],
+          }
+        : undefined,
+
+    // 网格
+    grid: {
+      left: '6%',
+      right: '6%',
+      bottom: '8%',
+      top: props.title ? '15%' : '10%',
+      containLabel: true,
+      show: props.showGrid !== false,
+    },
+
+    // X 轴
+    xAxis: {
+      type: 'category',
+      data: xAxisData,
+      name: props.xAxisName || '',
+      nameLocation: 'middle',
+      nameGap: 30,
+      axisLine: {
+        show: props.showXAxisLine !== false,
+      },
+      axisLabel: {
+        show: props.showXAxisLabel !== false,
+      },
+      splitLine: {
+        show: props.showGrid !== false,
+      },
+    },
+
+    // Y 轴
+    yAxis: {
+      type: 'value',
+      name: props.yAxisName || '',
+      nameLocation: 'middle',
+      nameGap: 50,
+      axisLine: {
+        show: props.showYAxisLine !== false,
+      },
+      axisLabel: {
+        show: props.showYAxisLabel !== false,
+      },
+      splitLine: {
+        show: props.showGrid !== false,
+      },
+    },
+
+    // 系列
+    series: [
+      {
+        name: seriesName,
+        type: 'line',
+        data: data,
+        smooth: props.smooth !== false,
+        showSymbol: props.showSymbol !== false,
+        symbolSize: props.symbolSize || 6,
+        lineStyle: {
+          color: props.lineColor || '#5470c6',
+          width: props.lineWidth || 2,
+          type: props.lineType || 'solid',
+        },
+        itemStyle: {
+          color: props.lineColor || '#5470c6',
+        },
+        areaStyle: props.showArea
+          ? {
+              color: props.lineColor || '#5470c6',
+              opacity: props.areaOpacity || 0.3,
+            }
+          : undefined,
+      },
+    ],
+  }
+})
+</script>
+
+<style scoped>
+.v-line-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/chart/pieChart/pieChart.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="v-pie-chart" :style="{ width: '100%', height: '100%' }">
+    <v-chart :option="finalOption" autoresize class="echart" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { PieChart } from 'echarts/charts'
+import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import VChart from 'vue-echarts'
+import type { EChartsOption } from 'echarts'
+
+// 注册 ECharts 组件
+use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer])
+
+// 定义标准的 Props，不含任何业务逻辑 ID
+const props = defineProps<{
+  // 基础数据 Props
+  data?: Array<{ name: string; value: number }>
+
+  // 样式配置 Props
+  title?: string
+  titleAlign?: 'left' | 'center' | 'right'
+  titleSize?: number
+  titleColor?: string
+  seriesName?: string
+  radius?: string
+  centerX?: string
+  centerY?: string
+  showLegend?: boolean
+  legendOrient?: 'horizontal' | 'vertical'
+  legendLeft?: string
+  legendTop?: string
+  showLabel?: boolean
+  labelFormatter?: string
+
+  // 高级覆盖
+  option?: EChartsOption
+}>()
+
+// 默认值配置
+const defaultData = [
+  { name: 'Category A', value: 335 },
+  { name: 'Category B', value: 310 },
+  { name: 'Category C', value: 234 },
+  { name: 'Category D', value: 135 },
+  { name: 'Category E', value: 148 },
+]
+
+// 计算最终 Option
+const finalOption = computed<EChartsOption>(() => {
+  // 如果有高级配置 option，优先使用
+  if (props.option && Object.keys(props.option).length > 0) return props.option
+
+  const data = props.data && props.data.length ? props.data : defaultData
+  const seriesName = props.seriesName || 'Data'
+
+  return {
+    title: {
+      text: props.title || '',
+      left: props.titleAlign || 'center',
+      textStyle: {
+        fontSize: props.titleSize || 16,
+        color: props.titleColor || '#333',
+      },
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)',
+    },
+    legend: {
+      show: props.showLegend !== false,
+      orient: props.legendOrient || 'horizontal',
+      left: props.legendLeft || 'center',
+      top: props.legendTop || 'bottom',
+    },
+    series: [
+      {
+        name: seriesName,
+        type: 'pie',
+        radius: props.radius || '60%',
+        center: [props.centerX || '50%', props.centerY || '50%'],
+        data: data,
+        label: {
+          show: props.showLabel !== false,
+          formatter: props.labelFormatter || '{b}: {c}',
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+      },
+    ],
+  }
+})
+</script>
+
+<style scoped>
+.v-pie-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/chart/radarChart/radarChart.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="v-radar-chart" :style="{ width: '100%', height: '100%' }">
+    <v-chart :option="finalOption" autoresize class="echart" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { RadarChart } from 'echarts/charts'
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  RadarComponent,
+} from 'echarts/components'
+import VChart from 'vue-echarts'
+import type { EChartsOption } from 'echarts'
+
+// 注册 ECharts 组件
+use([TitleComponent, TooltipComponent, LegendComponent, RadarComponent, RadarChart, CanvasRenderer])
+
+// 定义标准的 Props，不含任何业务逻辑 ID
+const props = defineProps<{
+  // 基础数据 Props
+  indicators?: Array<{ name: string; max: number }>
+  seriesData?: Array<{ name: string; value: number[] }>
+
+  // 样式配置 Props
+  title?: string
+  seriesName?: string
+  radarShape?: 'polygon' | 'circle'
+  splitNumber?: number
+  axisNameColor?: string
+  showArea?: boolean
+  areaOpacity?: number
+
+  // 高级覆盖
+  option?: EChartsOption
+}>()
+
+// 默认值配置
+const defaultIndicators = [
+  { name: '销售', max: 100 },
+  { name: '管理', max: 100 },
+  { name: '技术', max: 100 },
+  { name: '客服', max: 100 },
+  { name: '研发', max: 100 },
+  { name: '市场', max: 100 },
+]
+
+const defaultSeriesData = [
+  { name: '预算', value: [43, 85, 70, 75, 68, 92] },
+  { name: '实际开销', value: [50, 90, 60, 82, 73, 85] },
+]
+
+// 计算最终 Option
+const finalOption = computed<EChartsOption>(() => {
+  // 如果有高级配置 option，优先使用
+  if (props.option && Object.keys(props.option).length > 0) return props.option
+
+  const indicators =
+    props.indicators && props.indicators.length ? props.indicators : defaultIndicators
+  const seriesData =
+    props.seriesData && props.seriesData.length ? props.seriesData : defaultSeriesData
+  const seriesName = props.seriesName || 'Radar'
+
+  return {
+    title: {
+      text: props.title || '',
+      left: 'center',
+    },
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      bottom: 10,
+      data: seriesData.map((s) => s.name),
+    },
+    radar: {
+      indicator: indicators,
+      shape: props.radarShape || 'polygon',
+      splitNumber: props.splitNumber || 5,
+      axisName: {
+        color: props.axisNameColor || '#333',
+      },
+    },
+    series: [
+      {
+        name: seriesName,
+        type: 'radar',
+        data: seriesData,
+        areaStyle: props.showArea
+          ? {
+              opacity: props.areaOpacity || 0.3,
+            }
+          : undefined,
+      },
+    ],
+  }
+})
+</script>
+
+<style scoped>
+.v-radar-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.echart {
+  width: 100%;
+  height: 100%;
+}
+</style>