30分钟上手Vue-Data-UI：零基础数据可视化组件库实战指南

2026-02-06 04:21:47作者：魏侃纯Zoe

一、价值定位：为什么选择Vue-Data-UI

1.1 核心优势：重新定义数据可视化开发效率

Vue-Data-UI是一套基于Vue 3框架的可复用界面组件集合，专为数据可视化场景设计。相比传统开发方式，它通过以下特性显著提升开发效率：

开箱即用的组件体系：提供60+种预构建图表组件，覆盖从基础柱状图到复杂3D可视化的全场景需求，平均减少80%的重复编码工作
双向绑定的数据响应：采用Vue 3的响应式系统，数据更新自动触发视图重绘，比手动操作DOM减少65%的状态维护代码
主题化视觉系统：内置5套专业设计主题（zen/hack/concrete等），支持一键切换，设计适配成本降低90%
渐进式集成方案：支持全局注册/局部导入/按需加载等多种集成方式，最小化对现有项目的侵入性

1.2 功能矩阵：全场景数据展示解决方案

功能类别	核心组件	适用场景	业务价值
基础图表	柱状图/折线图/饼图	常规数据报表	快速构建标准化数据看板
高级可视化	关系网络图/3D柱状图/词云	复杂数据关系展示	发现传统图表难以呈现的隐藏规律
微型图表	迷你进度条/趋势指标	表格内联数据	在有限空间展示关键指标变化
交互控件	数据标注器/缩放控制器	数据探索分析	提升用户对数据的自主探索能力

1.3 技术特性：开发者友好的设计理念

TypeScript原生支持：所有组件提供完整类型定义，开发阶段错误捕获率提升40%
零外部依赖：核心功能不依赖任何第三方图表库，打包体积减少50%
响应式自适应：自动适配从移动设备到4K大屏的各种显示尺寸，多端适配成本降低70%
可访问性设计：支持键盘导航和屏幕阅读器，满足企业级应用的无障碍需求

二、快速上手：从安装到第一个图表

2.1 环境准备：5分钟配置开发环境

📌 前置条件检查

Node.js版本 ≥ 14.0.0（推荐16.x LTS）
Vue版本 ≥ 3.3.0（支持Composition API）
npm/yarn/pnpm包管理器

🔍 安装步骤

1. 创建项目（如无现有Vue项目）

# 使用Vue CLI创建新项目
npm create vue@latest my-data-app
cd my-data-app
npm install

# 或使用Vite创建（推荐）
npm create vite@latest my-data-app -- --template vue
cd my-data-app
npm install

2. 安装Vue-Data-UI

# 使用npm安装
npm install vue-data-ui

# 或使用yarn
yarn add vue-data-ui

3. 验证安装

# 查看已安装版本
npm list vue-data-ui
# 应显示类似 vue-data-ui@3.5.2 的版本信息

2.2 基础使用：3种组件引入方式

方式1：全局注册（推荐用于全项目使用）

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
// 引入组件库核心样式
import 'vue-data-ui/style.css'
// 引入需要的组件
import { VueUiRadar, VueUiVerticalBar } from 'vue-data-ui'

const app = createApp(App)
// 全局注册组件（名称可自定义）
app.component('VueUiRadar', VueUiRadar)
app.component('VerticalBarChart', VueUiVerticalBar)
app.mount('#app')

方式2：局部导入（推荐用于单个组件）

<!-- src/components/SalesDashboard.vue -->
<template>
  <div class="dashboard">
    <VueUiVerticalBar :config="barConfig" :dataset="salesData" />
  </div>
</template>

<script setup>
// 仅在当前组件中导入需要的组件
import { VueUiVerticalBar } from 'vue-data-ui'
import { ref } from 'vue'

// 定义图表配置和数据
const barConfig = ref({
  theme: 'zen',
  width: '100%',
  height: 400
})

const salesData = ref([
  { name: 'Jan', value: 1200 },
  { name: 'Feb', value: 1900 },
  { name: 'Mar', value: 1500 }
])
</script>

方式3：动态组件（适用于需要动态切换图表类型的场景）

<template>
  <div class="dynamic-chart">
    <VueDataUi 
      :component="currentComponent" 
      :config="chartConfig" 
      :dataset="chartData" 
    />
    <button @click="switchComponent">切换图表类型</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VueDataUi } from 'vue-data-ui'

// 动态切换图表类型
const currentComponent = ref('VueUiDonut')
const chartConfig = ref({ theme: 'concrete' })
const chartData = ref([/* 数据数组 */])

const switchComponent = () => {
  currentComponent.value = currentComponent.value === 'VueUiDonut' 
    ? 'VueUiRadar' 
    : 'VueUiDonut'
}
</script>

2.3 配置详解：打造个性化图表

基础配置结构

const chartConfig = {
  // 主题设置
  theme: 'zen', // 可选值: zen/hack/concrete/celebration/celebrationNight
  
  // 尺寸设置
  width: '100%',  // 支持百分比或像素值
  height: 400,    // 像素高度
  
  // 标题配置
  title: {
    text: '月度销售趋势',
    style: { fontSize: '18px', color: '#333' }
  },
  
  // 图例设置
  legend: {
    visible: true,
    position: 'bottom' // top/bottom/left/right
  },
  
  // 交互设置
  interaction: {
    tooltip: {
      enabled: true,
      // 自定义tooltip内容
      customFormat: ({ datapoint }) => {
        return `<div class="custom-tooltip">
          <strong>${datapoint.name}</strong>
          <p>销售额: ¥${datapoint.value.toLocaleString()}</p>
        </div>`
      }
    },
    zoom: { enabled: true } // 启用缩放功能
  }
}

数据格式规范

// 基础柱状图数据格式
const salesData = [
  { 
    name: '产品A',  // 类别名称
    data: [1200, 1900, 1500, 2800, 2200],  // 数据数组
    color: '#42b883'  // 可选：自定义颜色
  },
  { 
    name: '产品B', 
    data: [900, 1500, 1800, 2200, 2500] 
  }
]

// 雷达图数据格式
const moodData = {
  categories: ['易用性', '性能', '设计', '功能', '兼容性'],
  series: [
    {
      name: '用户评分',
      data: [4.5, 3.8, 4.2, 4.0, 3.5]
    },
    {
      name: '行业基准',
      data: [3.8, 4.0, 3.5, 3.7, 4.2]
    }
  ]
}

三、场景实践：业务导向的数据可视化方案

3.1 销售分析看板：从数据到决策

业务需求

某电商平台需要展示季度销售数据，包括：

各产品类别的销售额对比
月度销售趋势变化
区域销售分布
关键指标(KPI)达成情况

技术实现

1. 组件组合方案

<template>
  <div class="sales-dashboard">
    <!-- 顶部KPI指标区 -->
    <div class="kpi-container">
      <VueUiKpi 
        title="总销售额" 
        :value="totalSales" 
        :change="salesGrowth" 
        prefix="¥"
        suffix="M"
      />
      <VueUiKpi 
        title="订单量" 
        :value="orderCount" 
        :change="orderGrowth"
        icon="shopping-cart"
      />
      <!-- 更多KPI指标... -->
    </div>
    
    <!-- 中部图表区 -->
    <div class="chart-row">
      <!-- 产品类别销售对比 -->
      <VueUiVerticalBar 
        :config="categoryConfig" 
        :dataset="categoryData" 
        class="chart-card"
      />
      
      <!-- 月度销售趋势 -->
      <VueUiXy 
        :config="trendConfig" 
        :dataset="trendData" 
        class="chart-card"
      />
    </div>
    
    <!-- 底部详细数据区 -->
    <div class="detail-row">
      <!-- 区域销售分布 -->
      <VueUiDonut 
        :config="regionConfig" 
        :dataset="regionData" 
        class="chart-card"
      />
      
      <!-- 销售明细表格 -->
      <VueUiTable 
        :config="tableConfig" 
        :dataset="detailData" 
        class="chart-card"
      />
    </div>
  </div>
</template>

2. 关键配置代码

// 销售趋势图配置（折线图）
const trendConfig = {
  theme: 'zen',
  type: 'line', // 指定图表类型为折线图
  xAxis: {
    type: 'time', // X轴为时间类型
    label: { format: 'MMM' } // 月份显示格式
  },
  yAxis: {
    label: { 
      format: (value) => `¥${value/1000}k` // Y轴单位格式化
    }
  },
  interaction: {
    zoom: { enabled: true }, // 启用缩放
    tooltip: {
      customFormat: ({ datapoint }) => {
        return `<div>
          <h4>${datapoint.date}</h4>
          <p>销售额: ¥${datapoint.value.toLocaleString()}</p>
          <p>同比增长: ${datapoint.yoy}%</p>
        </div>`
      }
    }
  },
  legend: { position: 'top' }
}

// 区域销售数据配置（环形图）
const regionData = [
  { name: '华东', value: 35, color: '#42b883' },
  { name: '华南', value: 25, color: '#35495e' },
  { name: '华北', value: 20, color: '#ff7979' },
  { name: '西部', value: 15, color: '#41b883' },
  { name: '其他', value: 5, color: '#95a5a6' }
]

业务价值分析

趋势识别：通过折线图的斜率变化，快速识别销售旺季（Q4）和淡季（Q2）
资源优化：根据区域占比数据，调整各区域的营销资源分配
异常预警：当实际销售额低于目标线20%时，自动触发预警标识
决策支持：通过产品类别对比，决定下季度重点推广的产品线

3.2 用户体验评估：多维数据可视化

业务场景

某SaaS产品团队需要通过用户体验调研数据，分析：

用户对产品各维度的满意度评分
不同用户群体的体验差异
满意度与留存率的相关性
NPS（净推荐值）分布情况

实现方案

1. 雷达图展示多维评分

<template>
  <div class="ux-dashboard">
    <VueUiMoodRadar 
      :config="radarConfig" 
      :dataset="radarData"
      class="chart-card"
    />
    <!-- 其他分析图表... -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VueUiMoodRadar } from 'vue-data-ui'

// 雷达图配置
const radarConfig = ref({
  theme: 'concrete',
  legend: { position: 'right' },
  axis: {
    max: 5, // 最大分值
    step: 1, // 刻度间隔
    label: { fontSize: 12 }
  },
  series: {
    // 配置区域样式
    style: { 
      opacity: 0.7,
      borderWidth: 2
    }
  }
})

// 用户体验评分数据
const radarData = ref({
  categories: [
    '易用性', '功能完整性', '性能速度', 
    '界面设计', '客户支持', '价格合理性'
  ],
  series: [
    { name: '现有用户', data: [4.2, 3.8, 3.5, 4.5, 4.0, 3.2] },
    { name: '流失用户', data: [2.8, 3.0, 2.2, 3.5, 2.5, 2.0] },
    { name: '行业基准', data: [3.5, 3.8, 3.7, 3.6, 3.4, 3.5] }
  ]
})
</script>

2. 相关性分析（散点图）

// 用户满意度与留存率相关性分析
const correlationConfig = {
  theme: 'hack',
  type: 'scatter', // 散点图类型
  xAxis: { title: '满意度评分' },
  yAxis: { title: '30天留存率(%)' },
  point: {
    // 根据用户群体设置不同颜色
    colorBy: 'series',
    size: 8,
    shape: 'circle'
  },
  tooltip: {
    customFormat: ({ datapoint }) => {
      return `<div>
        <strong>${datapoint.segment}</strong>
        <p>满意度: ${datapoint.satisfaction}</p>
        <p>留存率: ${datapoint.retention}%</p>
        <p>样本量: ${datapoint.sample}人</p>
      </div>`
    }
  }
}

业务解读

体验短板识别：流失用户在"性能速度"和"客户支持"维度评分显著低于现有用户，提示产品优化重点
满意度阈值发现：数据显示当满意度评分低于3.2分时，用户留存率急剧下降，可作为服务预警线
用户群体差异：企业用户更看重功能完整性，而个人用户更关注易用性和价格
改进优先级：通过四象限分析，确定"性能优化"和"客户支持响应速度"为最高优先级改进项

3.3 实时监控面板：动态数据可视化

应用场景

系统运维监控面板需要实时展示：

服务器资源使用率（CPU/内存/磁盘）
接口响应时间变化
错误率趋势
用户在线状态

技术要点

实时数据更新处理
动态阈值告警
资源占用可视化
时间序列数据展示

关键代码实现

1. 实时仪表盘组件

<template>
  <div class="monitoring-dashboard">
    <!-- 服务器资源监控 -->
    <div class="resource-metrics">
      <VueUiGauge 
        :config="cpuConfig" 
        :dataset="cpuData" 
        class="gauge-card"
      />
      <VueUiGauge 
        :config="memoryConfig" 
        :dataset="memoryData" 
        class="gauge-card"
      />
      <!-- 磁盘/网络等其他指标... -->
    </div>
    
    <!-- 接口响应时间 -->
    <VueUiSparkline 
      :config="apiConfig" 
      :dataset="apiResponseData"
      class="sparkline-card"
    />
    
    <!-- 错误率监控 -->
    <VueUiSparkbar 
      :config="errorConfig" 
      :dataset="errorRateData"
      class="sparkbar-card"
    />
    
    <!-- 告警日志 -->
    <VueUiTable 
      :config="alertConfig" 
      :dataset="alertData"
      class="alert-table"
    />
  </div>
</template>

2. 实时数据更新处理

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { VueUiGauge, VueUiSparkline, VueUiTable } from 'vue-data-ui'

// CPU使用率数据
const cpuData = ref({ value: 0 })
// 响应时间趋势数据
const apiResponseData = ref([])
// 更新定时器
let updateTimer = null

// 模拟实时数据更新
const fetchRealTimeData = () => {
  // 模拟CPU使用率波动
  cpuData.value = { 
    value: Math.random() * 60 + 20, // 20-80%随机值
    max: 100,
    threshold: 85 // 阈值告警线
  }
  
  // 添加最新响应时间数据（保持最近20个点）
  apiResponseData.value.push({
    timestamp: new Date().toISOString(),
    value: Math.random() * 300 + 50 // 50-350ms随机值
  })
  if (apiResponseData.value.length > 20) {
    apiResponseData.value.shift() // 移除最旧数据点
  }
  
  // 其他数据更新...
}

// 组件挂载时启动定时器
onMounted(() => {
  // 初始加载数据
  fetchRealTimeData()
  // 设置定时器（每2秒更新一次）
  updateTimer = setInterval(fetchRealTimeData, 2000)
})

// 组件卸载时清除定时器
onUnmounted(() => {
  if (updateTimer) clearInterval(updateTimer)
})
</script>

四、生态拓展：技术栈整合与高级应用

4.1 Vue 3 + TypeScript 最佳实践

类型定义与接口设计

// src/types/sales.ts
import type { 
  VueUiVerticalBarConfig, 
  VueUiVerticalBarDataset 
} from 'vue-data-ui'

// 定义销售数据接口
export interface SalesRecord {
  date: string
  category: string
  product: string
  region: string
  revenue: number
  quantity: number
  profit: number
}

// 定义图表配置接口
export interface SalesChartConfig {
  categoryChart: VueUiVerticalBarConfig
  trendChart: VueUiXyConfig
  regionChart: VueUiDonutConfig
}

// 定义组件Props类型
export interface SalesDashboardProps {
  startDate: string
  endDate: string
  region?: string
  category?: string
  // 是否显示详细数据
  showDetails?: boolean
}

组件封装示例

// src/components/SalesChart.vue
<script setup lang="ts">
import { ref, computed } from 'vue'
import { VueUiVerticalBar } from 'vue-data-ui'
import type { 
  VueUiVerticalBarConfig, 
  VueUiVerticalBarDataset,
  SalesRecord 
} from '@/types/sales'

// 定义Props
const props = defineProps<{
  data: SalesRecord[]
  groupBy: 'product' | 'region' | 'date'
  title?: string
}>()

// 处理图表配置
const chartConfig = ref<VueUiVerticalBarConfig>({
  theme: 'zen',
  width: '100%',
  height: 350,
  legend: { position: 'top' },
  bar: {
    radius: 4, // 圆角矩形
    spacing: 0.2 // 柱形间距
  }
})

// 计算属性：转换原始数据为图表所需格式
const chartData = computed<VueUiVerticalBarDataset>(() => {
  // 根据groupBy参数进行数据分组转换
  const groupedData = props.data.reduce((acc, record) => {
    const key = record[props.groupBy]
    if (!acc[key]) {
      acc[key] = { name: key, data: [] }
    }
    acc[key].data.push(record.revenue)
    return acc
  }, {})
  
  return Object.values(groupedData)
})
</script>

4.2 Nuxt.js 服务端渲染集成

集成优势

服务端预渲染图表初始数据，提升首屏加载速度
更好的SEO支持，便于数据内容被搜索引擎收录
服务端数据处理，减轻客户端计算压力
支持静态站点生成(SSG)模式部署

实现步骤

1. 安装Nuxt适配依赖

# 创建Nuxt项目
npx nuxi@latest init nuxt-data-app
cd nuxt-data-app
npm install

# 安装Vue-Data-UI
npm install vue-data-ui

2. 创建插件文件

// plugins/vue-data-ui.ts
import { defineNuxtPlugin } from '#app'
import 'vue-data-ui/style.css'
import { VueUiRadar, VueUiVerticalBar, VueUiDonut } from 'vue-data-ui'

export default defineNuxtPlugin((nuxtApp) => {
  // 注册常用组件
  nuxtApp.vueApp.component('VueUiRadar', VueUiRadar)
  nuxtApp.vueApp.component('VueUiVerticalBar', VueUiVerticalBar)
  nuxtApp.vueApp.component('VueUiDonut', VueUiDonut)
})

3. 页面组件实现

<!-- pages/sales-report.vue -->
<template>
  <div class="sales-report">
    <h1>季度销售报告</h1>
    
    <div class="chart-container">
      <VueUiVerticalBar 
        :config="barConfig" 
        :dataset="salesData"
      />
    </div>
    
    <div class="chart-container">
      <VueUiDonut 
        :config="donutConfig" 
        :dataset="categoryData"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
// 使用Nuxt的服务端数据获取
const { data: reportData } = await useAsyncData('sales-report', () => 
  $fetch('/api/sales-data', { 
    params: { 
      quarter: 'Q3', 
      year: 2023 
    } 
  })
)

// 处理图表数据
const salesData = ref(reportData.value?.trend || [])
const categoryData = ref(reportData.value?.categories || [])

// 图表配置
const barConfig = ref({
  theme: 'zen',
  title: '月度销售趋势',
  // 其他配置...
})

const donutConfig = ref({
  theme: 'concrete',
  title: '产品类别占比',
  // 其他配置...
})
</script>

4.3 自定义主题与样式扩展

主题定制需求

匹配企业品牌色
调整图表布局 spacing/margin
自定义字体与图标
适配暗色/亮色模式切换

实现方案

1. 创建自定义主题

// src/themes/custom-theme.js
export const corporateTheme = {
  // 基础颜色配置
  colors: {
    primary: '#2c5282',    // 品牌主色
    secondary: '#ed8936',  // 辅助色
    success: '#38a169',    // 成功状态色
    warning: '#dd6b20',    // 警告状态色
    danger: '#e53e3e',     // 错误状态色
    background: '#ffffff', // 背景色
    surface: '#f7fafc',    // 表面色
    text: {
      primary: '#2d3748',  // 主要文本色
      secondary: '#718096' // 次要文本色
    }
  },
  
  // 图表配色方案
  chartColors: [
    '#2c5282', '#4299e1', '#3182ce', 
    '#0bc5ea', '#48bb78', '#9f7aea', 
    '#ed8936', '#ed64a6', '#e53e3e'
  ],
  
  // 字体配置
  font: {
    family: '"Inter", "system-ui", sans-serif',
    sizes: {
      small: '12px',
      medium: '14px',
      large: '16px',
      xlarge: '18px'
    }
  },
  
  // 组件间距配置
  spacing: {
    small: '8px',
    medium: '16px',
    large: '24px',
    xlarge: '32px'
  }
}

2. 应用自定义主题

// 在main.js中全局应用
import { createApp } from 'vue'
import App from './App.vue'
import { registerTheme } from 'vue-data-ui'
import { corporateTheme } from './themes/custom-theme'

// 注册自定义主题
registerTheme('corporate', corporateTheme)

const app = createApp(App)
// 在组件中使用: config.theme = 'corporate'

3. 响应式主题切换

<template>
  <div class="theme-demo">
    <button @click="toggleTheme">
      切换{{ currentTheme === 'light' ? '暗色' : '亮色' }}模式
    </button>
    
    <VueUiRadar 
      :config="radarConfig" 
      :dataset="radarData"
    />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const currentTheme = ref('light')
const radarConfig = ref({
  theme: currentTheme.value,
  // 其他配置...
})

// 切换主题函数
const toggleTheme = () => {
  currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light'
  radarConfig.value.theme = currentTheme.value
  
  // 同步更新页面body类名
  document.body.className = currentTheme.value
}

// 初始化主题
watch(currentTheme, (newTheme) => {
  // 可以在这里添加主题切换时的过渡动画
  document.documentElement.style.setProperty(
    '--background-color', 
    newTheme === 'light' ? '#fff' : '#1a202c'
  )
}, { immediate: true })
</script>

五、进阶指南：性能优化与最佳实践

5.1 性能优化策略

数据处理优化

数据降采样：大数据集时，根据显示尺寸动态调整数据点数量
按需加载：初始只加载可见区域数据，滚动时再加载更多
数据缓存：对重复使用的计算结果进行缓存
Web Worker：复杂数据转换放在Web Worker中执行，避免阻塞主线程

组件性能调优

// 大数据集处理示例
const optimizeLargeDataset = (rawData, containerWidth) => {
  // 根据容器宽度计算最佳数据点数量（每个数据点至少需要8px宽度）
  const maxPoints = Math.floor(containerWidth / 8)
  
  // 如果数据点过多，进行降采样
  if (rawData.length > maxPoints) {
    const step = Math.ceil(rawData.length / maxPoints)
    return rawData.filter((_, index) => index % step === 0)
  }
  
  return rawData
}

// 在组件中使用
const chartData = computed(() => {
  // 获取容器宽度（可通过ref获取实际DOM宽度）
  const containerWidth = chartContainer.value?.offsetWidth || 800
  return optimizeLargeDataset(rawData.value, containerWidth)
})

5.2 常见问题解决方案

图表渲染问题

问题	原因	解决方案
图表不显示	容器尺寸为0	设置明确的width/height或使用CSS确保容器可见
数据更新无反应	未使用响应式数据	使用ref/reactive包装数据，确保数据变更触发重渲染
tooltip位置错误	容器定位方式导致	设置tooltip的container为body或调整position配置
图表模糊	SVG缩放问题	使用vector-effect: non-scaling-stroke或设置pixelRatio

性能问题排查

使用Vue DevTools的性能分析面板，识别重渲染组件
检查数据更新频率，避免不必要的高频更新
使用Chrome Performance面板分析渲染瓶颈
监控内存使用，避免数据缓存导致的内存泄漏

5.3 扩展性开发指南

自定义组件开发

Vue-Data-UI提供了组件开发工具包，可以基于现有组件扩展或创建全新组件：

// 自定义图表组件示例
import { defineComponent, h } from 'vue'
import { BaseChart, useChartConfig, useDataProcessor } from 'vue-data-ui/core'

export default defineComponent({
  name: 'CustomForecastChart',
  props: {
    // 继承基础图表属性
    ...BaseChart.props,
    // 添加自定义属性
    forecastDays: {
      type: Number,
      default: 7
    },
    predictionConfidence: {
      type: Number,
      default: 0.8
    }
  },
  setup(props) {
    // 使用内置的配置合并逻辑
    const { config } = useChartConfig(props, 'custom_forecast')
    
    // 使用数据处理工具
    const { processedData } = useDataProcessor(
      props.dataset,
      config,
      (data) => {
        // 自定义数据处理逻辑
        return processForecastData(data, props.forecastDays)
      }
    )
    
    // 渲染函数
    return () => h(BaseChart, {
      ...props,
      config,
      dataset: processedData.value,
      // 自定义渲染函数
      renderChart: (svg, data) => renderForecastChart(svg, data, config.value)
    })
  }
})

插件系统使用

Vue-Data-UI支持通过插件扩展功能：

// 注册导出插件
import { usePluginRegistry } from 'vue-data-ui/plugins'
import { PdfExportPlugin } from 'vue-data-ui/export-pdf'
import { ImageExportPlugin } from 'vue-data-ui/export-image'

// 注册插件
usePluginRegistry().register([
  PdfExportPlugin,
  ImageExportPlugin
])

// 在组件中使用
const { generatePdf, generateImage } = useChartExports()

// 导出PDF
const exportReport = async () => {
  const pdfBlob = await generatePdf({
    title: '销售分析报告',
    charts: [chart1Ref, chart2Ref], // 图表组件引用
    orientation: 'landscape'
  })
  
  // 下载文件
  downloadFile(pdfBlob, 'sales-report.pdf')
}