继续完善页面

2026-02-02 21:45:59 +08:00
parent f4af5dded9
commit 93b42a277a
19 changed files with 2785 additions and 672 deletions
--- a/components/analytics/AnalyticsMultiLineChart.uvue
+++ b/components/analytics/AnalyticsMultiLineChart.uvue
@@ -0,0 +1,123 @@
+<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: () => [] },
+    series: { type: Array, default: () => [] },
+    height: { type: Number, default: 400 }
+  },
+  data() {
+    return {
+      heightPx: '400px',
+      chartOption: {} as any
+    }
+  },
+  watch: {
+    xLabels: { handler() { this.updateOption() }, deep: true },
+    series: { handler() { this.updateOption() }, deep: true },
+    height: { 
+      handler() { 
+        this.heightPx = `${this.height}px`
+      } 
+    }
+  },
+  mounted() {
+    this.heightPx = `${this.height}px`
+    setTimeout(() => {
+      this.updateOption()
+    }, 200)
+  },
+  methods: {
+    toPlainObject(obj: any): any {
+      if (obj == null) return null
+      if (typeof obj !== 'object') return obj
+      if (Array.isArray(obj)) {
+        return obj.map((item) => this.toPlainObject(item))
+      }
+      const plain: any = {}
+      for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          const value = obj[key]
+          if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
+            continue
+          }
+          if (value != null && typeof value === 'object' && !Array.isArray(value)) {
+            let isSimple = true
+            for (const k in value) {
+              if (typeof value[k] === 'object' && value[k] !== null) {
+                isSimple = false
+                break
+              }
+            }
+            plain[key] = isSimple ? { ...value } : this.toPlainObject(value)
+          } else {
+            plain[key] = value
+          }
+        }
+      }
+      return plain
+    },
+    updateOption() {
+      if (!this.xLabels || this.xLabels.length === 0) return
+
+      const seriesData = (this.series as Array<any>).map(s => {
+        return {
+          name: s.name,
+          type: 'line',
+          smooth: true,
+          symbolSize: 6,
+          itemStyle: { color: s.color },
+          lineStyle: { width: 2 },
+          data: s.data
+        }
+      })
+
+      const option = {
+        grid: { left: 50, right: 30, top: 20, bottom: 40 },
+        tooltip: { trigger: 'axis' },
+        legend: {
+          top: 0,
+          left: 'center',
+          itemWidth: 12,
+          itemHeight: 2,
+          textStyle: { fontSize: 12, color: '#333' }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.xLabels,
+          axisLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
+          axisLabel: { 
+            color: 'rgba(0,0,0,0.45)', 
+            fontSize: 10,
+            rotate: 45
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: { show: false },
+          splitLine: { lineStyle: { color: 'rgba(0,0,0,0.05)' } },
+          axisLabel: { color: 'rgba(0,0,0,0.45)', fontSize: 10 }
+        },
+        series: seriesData
+      }
+      this.chartOption = this.toPlainObject(option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-wrap { width: 100%; position: relative; overflow: hidden; }
+.chart { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
+</style>