登录注册/数据分析

2026-01-22 21:15:02 +08:00
parent 75fad97d5d
commit fdbee0fa32
41 changed files with 5812 additions and 2102 deletions
--- a/components/analytics/AnalyticsComboChart.uvue
+++ b/components/analytics/AnalyticsComboChart.uvue
@@ -0,0 +1,116 @@
+<template>
+  <view class="chart-wrap" :style="{ height: heightPx }">
+    <EChartsView :option="chartOption" class="chart" />
+  </view>
+</template>
+
+<script lang="uts">
+import EChartsView from '@/uni_modules/charts/EChartsView.vue'
+
+export default {
+  components: {
+    EChartsView
+  },
+  props: {
+    xLabels: { type: Array, default: () => [] },
+    gmv: { type: Array, default: () => [] },
+    orders: { type: Array, default: () => [] },
+    height: { type: Number, default: 320 }
+  },
+
+  data() {
+    return {
+      heightPx: '320px',
+      chartOption: {} as any
+    }
+  },
+
+  watch: {
+    xLabels: { handler() { this.updateOption() }, deep: true },
+    gmv: { handler() { this.updateOption() }, deep: true },
+    orders: { handler() { this.updateOption() }, deep: true },
+    height: { 
+      handler() { 
+        this.heightPx = `${this.height}px`
+      } 
+    }
+  },
+
+  mounted() {
+    this.heightPx = `${this.height}px`
+    this.updateOption()
+  },
+
+  methods: {
+    updateOption() {
+      const x = (this.xLabels as Array<any>).map((s) => String(s))
+      const bar = (this.gmv as Array<any>).map((v) => {
+        const n = Number(v)
+        return isFinite(n) ? n : 0
+      })
+      const line = (this.orders as Array<any>).map((v) => {
+        const n = Number(v)
+        return isFinite(n) ? n : 0
+      })
+
+      this.chartOption = {
+        grid: { left: 44, right: 44, top: 24, bottom: 36 },
+        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+        legend: { top: 0, left: 0, itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 12 } },
+        xAxis: {
+          type: 'category',
+          data: x,
+          axisTick: { show: false },
+          axisLine: { lineStyle: { color: 'rgba(0,0,0,0.12)' } },
+          axisLabel: { color: 'rgba(0,0,0,0.55)' }
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: 'GMV',
+            axisLine: { show: false },
+            splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)' } },
+            axisLabel: { color: 'rgba(0,0,0,0.55)' }
+          },
+          {
+            type: 'value',
+            name: '订单',
+            axisLine: { show: false },
+            splitLine: { show: false },
+            axisLabel: { color: 'rgba(0,0,0,0.55)' }
+          }
+        ],
+        series: [
+          {
+            name: 'GMV',
+            type: 'bar',
+            data: bar,
+            barWidth: 14,
+            itemStyle: { borderRadius: [6, 6, 0, 0] }
+          },
+          {
+            name: '订单数',
+            type: 'line',
+            yAxisIndex: 1,
+            data: line,
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 6,
+            lineStyle: { width: 2 }
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.chart-wrap {
+  width: 100%;
+}
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>