f

apps/web-antd/src/views/dashboard/analytics/analytics-revenue-trend.vue

@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+import type { DashboardApi } from '#/api/dashboard';
+
+import { onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+interface Props {
+  data?: DashboardApi.TrendData[];
+}
+
+const props = defineProps<Props>();
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+const updateChart = () => {
+  if (!props.data || props.data.length === 0) {
+    return;
+  }
+
+  const dates = props.data.map((item) => item.date);
+  const values = props.data.map((item) => item.value);
+
+  renderEcharts({
+    grid: {
+      bottom: 0,
+      containLabel: true,
+      left: '1%',
+      right: '1%',
+      top: '2%',
+    },
+    series: [
+      {
+        areaStyle: {},
+        data: values,
+        itemStyle: {
+          color: '#019680',
+        },
+        smooth: true,
+        type: 'line',
+        name: '营收金额',
+      },
+    ],
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#019680',
+          width: 1,
+        },
+      },
+      trigger: 'axis',
+      formatter: (params: any) => {
+        const param = params[0];
+        return `${param.name}<br/>${param.seriesName}: ¥${param.value.toFixed(2)}`;
+      },
+    },
+    xAxis: {
+      axisTick: {
+        show: false,
+      },
+      boundaryGap: false,
+      data: dates,
+      splitLine: {
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+        },
+        show: true,
+      },
+      type: 'category',
+    },
+    yAxis: [
+      {
+        axisTick: {
+          show: false,
+        },
+        splitArea: {
+          show: true,
+        },
+        splitNumber: 4,
+        type: 'value',
+        axisLabel: {
+          formatter: (value: number) => {
+            if (value >= 10000) {
+              return `${(value / 10000).toFixed(1)}万`;
+            }
+            return value.toString();
+          },
+        },
+      },
+    ],
+  });
+};
+
+watch(
+  () => props.data,
+  () => {
+    updateChart();
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  updateChart();
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>