feat: 账单导入、统计维度扩展与收支记录增强

- 账单导入：新增支付宝账单解析/导入接口，按 external_no 去重；前端拖拽上传 + 预览确认弹窗 - 分类可选：category_id 允许为空，支持「未分类」筛选，新增按类型一键批量设置分类 - 备注隐藏：新增 remark_hidden 与切换接口，列表默认显示 ****** 并可单格查看/取消隐藏，导出同步隐藏 - 统计扩展：新增 /statistics/summary、/statistics/group，支持日/周/月/季/年/支付方式/分类/类型维度与时间范围过滤 - 收支记录：金额区间过滤、金额/交易时间列排序、分页快速跳转、本页收支结余汇总、交易时间列前置并合并创建时间提示 - 用户偏好：统计面板与列表的筛选条件持久化到 localStorage，进入自动还原 - 其他：新增默认分类种子脚本（含美容美发）、commons-csv 依赖、上传大小限制 10MB、Vite 监听 0.0.0.0
2026-09-17 13:19:59 +08:00
parent 733ed4bb86
commit 1df6e23510
35 changed files with 3016 additions and 1620 deletions
@@ -1,34 +1,183 @@
 <script setup lang="ts">
-// 统计面板组件：展示月度收支汇总、分类占比饼图、每日收支趋势柱状图
-import { ref, onMounted, watch } from 'vue'
-import { NCard, NGrid, NGridItem, NStatistic, NSpace, NSelect } from 'naive-ui'
+// 统计面板组件：展示指定时间范围的收支汇总、概览指标、趋势、分类占比与支付方式分布
+import { ref, computed, onMounted, watch, nextTick, h } from 'vue'
+import { NCard, NGrid, NGridItem, NStatistic, NSpace, NSelect, NDatePicker, NInput, NInputNumber, NButton } from 'naive-ui'
 import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart, PieChart, BarChart } from 'echarts/charts'
 import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
-import { getMonthlyStatistics, getCategoryStatistics, getTrendStatistics } from '../api/statistics'
+import { getStatisticsSummary, getStatisticsGroup } from '../api/statistics'
+import { getCategoryList } from '../api/category'

 // 注册 ECharts 所需组件
 use([CanvasRenderer, LineChart, PieChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])

-const now = new Date()
-const selectedYear = ref(now.getFullYear()) // 选中的年份
-const selectedMonth = ref(now.getMonth() + 1) // 选中的月份
+// 时间范围快捷选项
+const rangeOptions = [
+  { label: '本月', value: 'month' },
+  { label: '近3月', value: '3month' },
+  { label: '近12月', value: '12month' },
+  { label: '自定义', value: 'custom' },
+]
+// 趋势图时间粒度选项
+const granularityOptions = [
+  { label: '按日', value: 'day' },
+  { label: '按周', value: 'week' },
+  { label: '按月', value: 'month' },
+  { label: '按季', value: 'quarter' },
+  { label: '按年', value: 'year' },
+]

-// 月度汇总数据（总收入、总支出、结余、交易笔数）
-const monthly = ref({ totalIncome: 0, totalExpense: 0, balance: 0, transactionCount: 0 })
-const categoryData = ref<any[]>([]) // 分类统计数据
-const trendData = ref<any[]>([]) // 每日趋势数据
+const rangeType = ref<'month' | '3month' | '12month' | 'custom'>('month') // 时间范围类型
+const customRange = ref<[number, number] | null>(null) // 自定义起止时间戳
+const granularity = ref<'day' | 'week' | 'month' | 'quarter' | 'year'>('day') // 趋势粒度

-// 年份和月份下拉选项
-const yearOptions = Array.from({ length: 10 }, (_, i) => ({ label: `${2020 + i}年`, value: 2020 + i }))
-const monthOptions = Array.from({ length: 12 }, (_, i) => ({ label: `${i + 1}月`, value: i + 1 }))
+// 过滤条件
+const filterType = ref<string[]>([]) // 类型（多选）
+const filterCategory = ref<number[]>([]) // 分类（多选，0 表示未分类）
+const filterPaymentMethod = ref<string[]>([]) // 支付方式（多选）
+const filterMinAmount = ref<number | null>(null) // 最小金额
+const filterMaxAmount = ref<number | null>(null) // 最大金额
+const filterRemark = ref('') // 备注关键字

-const pieOption = ref({}) // 饼图配置
-const trendOption = ref({}) // 趋势图配置
+// 类型与支付方式选项
+const typeOptions = [
+  { label: '支出', value: 'EXPENSE' },
+  { label: '收入', value: 'INCOME' },
+]
+const paymentOptions = [
+  { label: '微信', value: 'WECHAT' },
+  { label: '支付宝', value: 'ALIPAY' },
+  { label: '现金', value: 'CASH' },
+  { label: '银行卡', value: 'BANK' },
+]

-/** 更新支出分类饼图配置 */
+/** 分类选项数据结构 */
+interface CategoryOption {
+  label: string
+  value: number
+  type: string
+  icon: string
+}
+
+const categories = ref<CategoryOption[]>([]) // 分类选项列表
+// 分类筛选项：固定包含「未分类」，其余分类按类型筛选联动
+const categoryFilterOptions = computed(() => [
+  { label: '未分类', value: 0, type: '' },
+  ...categories.value.filter(c => filterType.value.length === 0 || filterType.value.includes(c.type)),
+])
+
+/** 分类下拉项渲染：图标 + 名称 */
+function renderCategoryLabel(option: any) {
+  return h('span', null, [
+    option.icon ? h('span', { style: { marginRight: '6px' } }, option.icon) : null,
+    option.label,
+  ])
+}
+
+/** 将分类筛选拆分为分类ID与未分类标记 */
+function buildCategoryFilter() {
+  const ids = filterCategory.value.filter((v) => v !== 0)
+  return {
+    categoryIds: ids.length > 0 ? ids : undefined,
+    uncategorized: filterCategory.value.includes(0) ? true : undefined,
+  }
+}
+
+/** 统计接口的过滤条件 */
+const filterParams = computed(() => ({
+  types: filterType.value.length > 0 ? filterType.value : undefined,
+  ...buildCategoryFilter(),
+  paymentMethods: filterPaymentMethod.value.length > 0 ? filterPaymentMethod.value : undefined,
+  minAmount: filterMinAmount.value ?? undefined,
+  maxAmount: filterMaxAmount.value ?? undefined,
+  remark: filterRemark.value.trim() || undefined,
+}))
+
+// 统计结果
+const summary = ref<any>({
+  totalIncome: 0, totalExpense: 0, balance: 0, transactionCount: 0,
+  dayCount: 0, avgDailyIncome: 0, avgDailyExpense: 0,
+  maxExpenseAmount: 0, maxExpenseTime: null, maxExpenseRemark: '', avgExpenseAmount: 0,
+})
+const trendData = ref<any[]>([]) // 趋势分组数据
+const categoryData = ref<any[]>([]) // 分类分组数据
+const paymentData = ref<any[]>([]) // 支付方式分组数据
+
+const pieOption = ref({}) // 支出分类饼图
+const paymentOption = ref({}) // 支付方式饼图
+const trendOption = ref({}) // 趋势柱状图
+
+const pad = (n: number) => String(n).padStart(2, '0')
+
+/** 格式化日期为查询用字符串 */
+function fmt(d: Date, end = false): string {
+  const date = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+  return end ? `${date}T23:59:59` : `${date}T00:00:00`
+}
+
+/** 根据快捷选项与自定义区间计算查询起止时间 */
+const range = computed(() => {
+  if (rangeType.value === 'custom' && customRange.value) {
+    return {
+      startTime: fmt(new Date(customRange.value[0])),
+      endTime: fmt(new Date(customRange.value[1]), true),
+    }
+  }
+  const now = new Date()
+  const end = new Date(now.getFullYear(), now.getMonth() + 1, 0) // 本月最后一天
+  let start: Date
+  if (rangeType.value === '12month') {
+    start = new Date(now.getFullYear(), now.getMonth() - 11, 1)
+  } else if (rangeType.value === '3month') {
+    start = new Date(now.getFullYear(), now.getMonth() - 2, 1)
+  } else {
+    start = new Date(now.getFullYear(), now.getMonth(), 1)
+  }
+  return { startTime: fmt(start), endTime: fmt(end, true) }
+})
+
+/** 计算 ISO 周标签，与后端 %x-W%v 对齐 */
+function isoWeekKey(d: Date): string {
+  const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()))
+  const dayNum = date.getUTCDay() || 7
+  date.setUTCDate(date.getUTCDate() + 4 - dayNum)
+  const yearStart = new Date(Date.UTC(date.getUTCFullYear(), 0, 1))
+  const weekNo = Math.ceil(((date.getTime() - yearStart.getTime()) / 86400000 + 1) / 7)
+  return `${date.getUTCFullYear()}-W${pad(weekNo)}`
+}
+
+/** 按粒度生成区间内完整的分组键序列（用于补全无数据的点） */
+function buildKeys(start: Date, end: Date, gran: string): string[] {
+  const keys: string[] = []
+  if (gran === 'day') {
+    for (const d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
+      keys.push(`${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`)
+    }
+  } else if (gran === 'week') {
+    const seen = new Set<string>()
+    for (const d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
+      const k = isoWeekKey(d)
+      if (!seen.has(k)) { seen.add(k); keys.push(k) }
+    }
+  } else if (gran === 'month') {
+    for (const d = new Date(start.getFullYear(), start.getMonth(), 1); d <= end; d.setMonth(d.getMonth() + 1)) {
+      keys.push(`${d.getFullYear()}-${pad(d.getMonth() + 1)}`)
+    }
+  } else if (gran === 'quarter') {
+    const seen = new Set<string>()
+    for (const d = new Date(start.getFullYear(), start.getMonth(), 1); d <= end; d.setMonth(d.getMonth() + 1)) {
+      const k = `${d.getFullYear()}-Q${Math.floor(d.getMonth() / 3) + 1}`
+      if (!seen.has(k)) { seen.add(k); keys.push(k) }
+    }
+  } else {
+    for (let y = start.getFullYear(); y <= end.getFullYear(); y++) keys.push(String(y))
+  }
+  return keys
+}
+
+/** 更新支出分类饼图 */
 function updatePieChart() {
  pieOption.value = {
    title: { text: '支出分类占比', left: 'center' },
@@ -36,98 +185,308 @@ function updatePieChart() {
    series: [
      {
        type: 'pie',
-        radius: ['40%', '70%'], // 环形图内外半径
+        radius: ['40%', '70%'],
        data: categoryData.value
-          .filter((c: any) => c.type === 'EXPENSE') // 只展示支出类
-          .map((c: any) => ({ name: c.categoryName, value: c.amount })),
+          .filter((c: any) => c.type === 'EXPENSE')
+          .map((c: any) => ({ name: c.name, value: Number(c.total) })),
      },
    ],
  }
 }

-/** 更新每日收支趋势柱状图配置 */
+/** 更新支付方式分布饼图 */
+function updatePaymentChart() {
+  paymentOption.value = {
+    title: { text: '支付方式分布', left: 'center' },
+    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+    series: [
+      {
+        type: 'pie',
+        radius: ['40%', '70%'],
+        data: paymentData.value.map((p: any) => ({ name: p.name, value: Number(p.total) })),
+      },
+    ],
+  }
+}
+
+/** 更新每日/周/月收支趋势柱状图（补全缺失点） */
 function updateTrendChart() {
+  const { startTime, endTime } = range.value
+  const start = new Date(startTime.replace('T', ' ').replace(/-/g, '/'))
+  const end = new Date(endTime.replace('T', ' ').replace(/-/g, '/'))
+  const keys = buildKeys(start, end, granularity.value)
+  const map = new Map<string, any>(trendData.value.map((d: any) => [d.key, d]))
+  const income = keys.map((k) => Number(map.get(k)?.income ?? 0))
+  const expense = keys.map((k) => Number(map.get(k)?.expense ?? 0))
+  const labels = keys.map((k) => (granularity.value === 'day' ? k.substring(5) : k))
+
  trendOption.value = {
-    title: { text: '每日收支趋势' },
    tooltip: { trigger: 'axis' },
    legend: { data: ['收入', '支出'], bottom: 0 },
    grid: { left: 60, right: 20, top: 40, bottom: 40 },
-    xAxis: {
-      type: 'category',
-      data: trendData.value.map((d: any) => d.date.substring(5)), // 只显示 MM-DD
-    },
+    xAxis: { type: 'category', data: labels },
    yAxis: { type: 'value' },
    series: [
-      { name: '收入', type: 'bar', data: trendData.value.map((d: any) => d.income), color: '#18a058' },
-      { name: '支出', type: 'bar', data: trendData.value.map((d: any) => d.expense), color: '#d03050' },
+      { name: '收入', type: 'bar', data: income, color: '#18a058' },
+      { name: '支出', type: 'bar', data: expense, color: '#d03050' },
    ],
  }
 }

 /** 并行请求所有统计数据并更新图表 */
 async function fetchData() {
-  const params = { year: selectedYear.value, month: selectedMonth.value }
+  const { startTime, endTime } = range.value
+  const filters = filterParams.value
  try {
-    const [monthlyRes, categoryRes, trendRes]: any[] = await Promise.all([
-      getMonthlyStatistics(params),
-      getCategoryStatistics(params),
-      getTrendStatistics(params),
+    const [summaryRes, trendRes, categoryRes, paymentRes]: any[] = await Promise.all([
+      getStatisticsSummary({ startTime, endTime, ...filters }),
+      getStatisticsGroup({ dimension: granularity.value, startTime, endTime, ...filters }),
+      getStatisticsGroup({ dimension: 'category', startTime, endTime, ...filters }),
+      getStatisticsGroup({ dimension: 'paymentMethod', startTime, endTime, ...filters }),
    ])
-    monthly.value = monthlyRes.data
-    categoryData.value = categoryRes.data
+    summary.value = summaryRes.data
    trendData.value = trendRes.data
+    categoryData.value = categoryRes.data
+    paymentData.value = paymentRes.data
    updatePieChart()
+    updatePaymentChart()
    updateTrendChart()
  } catch (e: any) {
    console.error('加载统计数据失败', e)
  }
 }

-// 监听年月变化，自动重新加载数据
-watch([selectedYear, selectedMonth], fetchData)
-onMounted(fetchData) // 组件挂载时加载数据
+/** 面板偏好存储键 */
+const DASHBOARD_PREFS_KEY = 'finance.dashboard.prefs'
+let suppressRangeWatch = false // 还原偏好时跳过 rangeType 对粒度的默认覆盖
+
+/** 读取面板偏好并还原（时间范围、粒度、过滤条件） */
+function loadPrefs() {
+  try {
+    const raw = localStorage.getItem(DASHBOARD_PREFS_KEY)
+    if (!raw) return
+    const p = JSON.parse(raw)
+    suppressRangeWatch = true
+    if (['month', '3month', '12month', 'custom'].includes(p.rangeType)) rangeType.value = p.rangeType
+    if (Array.isArray(p.customRange) && p.customRange.length === 2) customRange.value = p.customRange
+    if (Array.isArray(p.filterType)) filterType.value = p.filterType
+    if (Array.isArray(p.filterCategory)) filterCategory.value = p.filterCategory
+    if (Array.isArray(p.filterPaymentMethod)) filterPaymentMethod.value = p.filterPaymentMethod
+    if (typeof p.filterMinAmount === 'number') filterMinAmount.value = p.filterMinAmount
+    if (typeof p.filterMaxAmount === 'number') filterMaxAmount.value = p.filterMaxAmount
+    if (typeof p.filterRemark === 'string') filterRemark.value = p.filterRemark
+    if (['day', 'week', 'month', 'quarter', 'year'].includes(p.granularity)) granularity.value = p.granularity
+  } catch (e) {
+    // 忽略损坏的偏好数据
+  }
+}
+
+/** 保存面板偏好，下次进入自动还原 */
+function savePrefs() {
+  try {
+    localStorage.setItem(DASHBOARD_PREFS_KEY, JSON.stringify({
+      rangeType: rangeType.value,
+      customRange: customRange.value,
+      granularity: granularity.value,
+      filterType: filterType.value,
+      filterCategory: filterCategory.value,
+      filterPaymentMethod: filterPaymentMethod.value,
+      filterMinAmount: filterMinAmount.value,
+      filterMaxAmount: filterMaxAmount.value,
+      filterRemark: filterRemark.value,
+    }))
+  } catch (e) {
+    // 忽略写入失败
+  }
+}
+
+/** 加载分类选项 */
+async function fetchCategories() {
+  try {
+    const res: any = await getCategoryList()
+    categories.value = res.data.map((c: any) => ({ label: c.name, value: c.id, type: c.type, icon: c.icon || '' }))
+  } catch (e) {
+    // 静默处理
+  }
+}
+
+/** 重置所有过滤条件（保留时间范围与粒度） */
+function handleResetFilters() {
+  filterType.value = []
+  filterCategory.value = []
+  filterPaymentMethod.value = []
+  filterMinAmount.value = null
+  filterMaxAmount.value = null
+  filterRemark.value = ''
+}
+
+// 切换时间范围时给出默认粒度（还原偏好时不覆盖）
+watch(rangeType, (v) => {
+  if (suppressRangeWatch) {
+    suppressRangeWatch = false
+    return
+  }
+  granularity.value = v === '12month' ? 'month' : v === '3month' ? 'week' : 'day'
+})
+// 范围、粒度或过滤条件变化时重新加载
+watch([() => range.value.startTime, () => range.value.endTime, granularity, filterParams], fetchData)
+// 任一偏好变化时自动保存
+watch([rangeType, customRange, granularity, filterType, filterCategory, filterPaymentMethod, filterMinAmount, filterMaxAmount, filterRemark], savePrefs, { deep: true })
+
+onMounted(async () => {
+  loadPrefs()
+  fetchCategories()
+  await nextTick()
+  suppressRangeWatch = false
+  fetchData()
+})
 </script>

 <template>
  <div>
-    <!-- 顶部：标题和年月选择器 -->
-    <NSpace justify="space-between" align="center" style="margin-bottom: 20px;">
+    <!-- 顶部：标题与时间范围选择 -->
+    <NSpace justify="space-between" align="center" style="margin-bottom: 20px;" :wrap="true">
      <h2 style="margin: 0;">统计面板</h2>
-      <NSpace>
-        <NSelect v-model:value="selectedYear" :options="yearOptions" style="width: 100px;" />
-        <NSelect v-model:value="selectedMonth" :options="monthOptions" style="width: 80px;" />
+      <NSpace align="center" :wrap="true">
+        <NSelect v-model:value="rangeType" :options="rangeOptions" style="width: 110px;" />
+        <NDatePicker
+          v-if="rangeType === 'custom'"
+          v-model:value="customRange"
+          type="daterange"
+          clearable
+          style="width: 260px;"
+        />
+        <span style="color: #999; font-size: 12px;">{{ range.startTime.substring(0, 10) }} ~ {{ range.endTime.substring(0, 10) }}</span>
      </NSpace>
    </NSpace>

-    <!-- 统计卡片：总收入、总支出、结余、交易笔数 -->
-    <NGrid :cols="4" :x-gap="16" :y-gap="16" style="margin-bottom: 20px;">
+    <!-- 过滤条件（偏好自动记忆） -->
+    <NCard :bordered="false" style="margin-bottom: 16px;">
+      <NSpace align="center" :wrap="true" :size="[12, 12]">
+        <NSelect
+          v-model:value="filterType"
+          :options="typeOptions"
+          multiple
+          clearable
+          :max-tag-count="2"
+          placeholder="类型"
+          style="width: 160px;"
+        />
+        <NSelect
+          v-model:value="filterCategory"
+          :options="categoryFilterOptions"
+          multiple
+          clearable
+          filterable
+          :max-tag-count="2"
+          :render-label="renderCategoryLabel"
+          placeholder="分类"
+          style="width: 200px;"
+        />
+        <NSelect
+          v-model:value="filterPaymentMethod"
+          :options="paymentOptions"
+          multiple
+          clearable
+          :max-tag-count="2"
+          placeholder="支付方式"
+          style="width: 200px;"
+        />
+        <NInputNumber
+          v-model:value="filterMinAmount"
+          :min="0"
+          :precision="2"
+          clearable
+          placeholder="最小金额"
+          style="width: 130px;"
+        />
+        <span style="color: #999;">~</span>
+        <NInputNumber
+          v-model:value="filterMaxAmount"
+          :min="0"
+          :precision="2"
+          clearable
+          placeholder="最大金额"
+          style="width: 130px;"
+        />
+        <NInput
+          v-model:value="filterRemark"
+          clearable
+          placeholder="备注搜索"
+          style="width: 180px;"
+        />
+        <NButton @click="handleResetFilters">重置筛选</NButton>
+      </NSpace>
+    </NCard>
+
+    <!-- 汇总卡片 -->
+    <NGrid :cols="4" :x-gap="16" :y-gap="16" style="margin-bottom: 16px;">
      <NGridItem>
        <NCard>
-          <NStatistic label="总收入" :value="Number(monthly.totalIncome).toFixed(2)" style="color: #18a058;">
+          <NStatistic label="总收入" :value="Number(summary.totalIncome).toFixed(2)" style="color: #18a058;">
            <template #prefix>+</template>
          </NStatistic>
        </NCard>
      </NGridItem>
      <NGridItem>
        <NCard>
-          <NStatistic label="总支出" :value="Number(monthly.totalExpense).toFixed(2)" style="color: #d03050;">
+          <NStatistic label="总支出" :value="Number(summary.totalExpense).toFixed(2)" style="color: #d03050;">
            <template #prefix>-</template>
          </NStatistic>
        </NCard>
      </NGridItem>
      <NGridItem>
        <NCard>
-          <NStatistic label="结余" :value="Number(monthly.balance).toFixed(2)" />
+          <NStatistic label="结余" :value="Number(summary.balance).toFixed(2)" />
        </NCard>
      </NGridItem>
      <NGridItem>
        <NCard>
-          <NStatistic label="交易笔数" :value="monthly.transactionCount" />
+          <NStatistic label="交易笔数" :value="summary.transactionCount" />
        </NCard>
      </NGridItem>
    </NGrid>

-    <!-- 图表区域：饼图 + 趋势柱状图 -->
+    <!-- 概览指标 -->
+    <NGrid :cols="4" :x-gap="16" :y-gap="16" style="margin-bottom: 20px;">
+      <NGridItem>
+        <NCard>
+          <NStatistic label="日均收入" :value="Number(summary.avgDailyIncome).toFixed(2)" />
+        </NCard>
+      </NGridItem>
+      <NGridItem>
+        <NCard>
+          <NStatistic label="日均支出" :value="Number(summary.avgDailyExpense).toFixed(2)" />
+        </NCard>
+      </NGridItem>
+      <NGridItem>
+        <NCard>
+          <NStatistic label="最大单笔支出" :value="Number(summary.maxExpenseAmount).toFixed(2)">
+            <template #suffix>
+              <span style="font-size: 12px; color: #999;">{{ (summary.maxExpenseRemark || '').slice(0, 12) }}</span>
+            </template>
+          </NStatistic>
+        </NCard>
+      </NGridItem>
+      <NGridItem>
+        <NCard>
+          <NStatistic label="平均每笔支出" :value="Number(summary.avgExpenseAmount).toFixed(2)" />
+        </NCard>
+      </NGridItem>
+    </NGrid>
+
+    <!-- 趋势图 -->
+    <NCard style="margin-bottom: 16px;">
+      <template #header>
+        <NSpace justify="space-between" align="center">
+          <span>收支趋势</span>
+          <NSelect v-model:value="granularity" :options="granularityOptions" style="width: 110px;" size="small" />
+        </NSpace>
+      </template>
+      <VChart :option="trendOption" style="height: 350px;" autoresize />
+    </NCard>
+
+    <!-- 饼图区域：支出分类 + 支付方式 -->
    <NGrid :cols="2" :x-gap="16" :y-gap="16">
      <NGridItem>
        <NCard>
@@ -136,7 +495,7 @@ onMounted(fetchData) // 组件挂载时加载数据
      </NGridItem>
      <NGridItem>
        <NCard>
-          <VChart :option="trendOption" style="height: 350px;" autoresize />
+          <VChart :option="paymentOption" style="height: 350px;" autoresize />
        </NCard>
      </NGridItem>
    </NGrid>