提交

2026-03-11 11:16:35 +08:00
parent 8abfe7ffc4
commit 83b3230a31
338 changed files with 108069 additions and 0 deletions
@@ -0,0 +1,129 @@
+<template>
+  <div class="custom-card art-custom-card total-revenue">
+    <div class="custom-card-header">
+      <span class="title">{{ t('analysis.totalRevenue.title') }}</span>
+    </div>
+    <div class="custom-card-body">
+      <div ref="chartRef" style="height: 300px"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n'
+  import { EChartsOption } from 'echarts'
+  import { useChart } from '@/composables/useChart'
+
+  const { t } = useI18n()
+
+  const { chartRef, isDark, initChart } = useChart()
+
+  // 创建图表选项
+  const options: () => EChartsOption = () => ({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      top: 20,
+      right: 3,
+      bottom: 40,
+      left: 3,
+      containLabel: true
+    },
+    legend: {
+      data: [
+        t('analysis.totalRevenue.legend.onlineSales'),
+        t('analysis.totalRevenue.legend.offlineSales')
+      ],
+      bottom: 0,
+      icon: 'circle',
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 15,
+      textStyle: {
+        fontSize: 12,
+        color: isDark.value ? '#808290' : '#222B45'
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: isDark.value ? '#808290' : '#7B91B0'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { show: false },
+      axisTick: { show: false },
+      splitLine: {
+        lineStyle: {
+          color: isDark.value ? 'rgba(255, 255, 255, 0.1)' : '#EFF1F3',
+          width: 0.8
+        }
+      },
+      axisLabel: { color: isDark.value ? '#808290' : '#7B91B0' }
+    },
+    series: [
+      {
+        name: t('analysis.totalRevenue.legend.onlineSales'),
+        type: 'bar',
+        data: [12, 13, 5, 15, 10, 15, 18],
+        barWidth: '15',
+        itemStyle: {
+          color: '#0095FF',
+          borderRadius: [4, 4, 4, 4]
+        }
+      },
+      {
+        name: t('analysis.totalRevenue.legend.offlineSales'),
+        type: 'bar',
+        data: [10, 11, 20, 5, 11, 13, 10],
+        barWidth: '15',
+        itemStyle: {
+          color: '#95E0FB',
+          borderRadius: [4, 4, 4, 4]
+        }
+      }
+    ]
+  })
+
+  watch(isDark, () => {
+    initChart(options())
+  })
+
+  onMounted(() => {
+    initChart(options())
+  })
+</script>
+
+<style lang="scss" scoped>
+  .custom-card {
+    height: 400px;
+
+    &-body {
+      padding: 20px;
+    }
+  }
+
+  @media (max-width: $device-notebook) {
+    .custom-card {
+      height: 350px;
+
+      &-body {
+        > div {
+          height: 260px !important;
+        }
+      }
+    }
+  }
+</style>