变更首页

klp-ui/src/views/wms/order/components/CustomerRegion.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" style="width: 100%; height: 400px;"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'CustomerRegion',
+  props: {
+    customerData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    customerData: {
+      deep: true,
+      handler(val) {
+        if (val) {
+          this.initChart()
+        }
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      if (!this.$refs.chart) return
+      this.chart = echarts.init(this.$refs.chart)
+      const option = {
+        title: {
+          text: '客户区域分布',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 10,
+          data: this.customerData.map(item => item.region)
+        },
+        series: [
+          {
+            name: '客户数量',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '30',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.customerData.map(item => ({
+              name: item.region,
+              value: item.customerCount
+            }))
+          }
+        ]
+      }
+      this.chart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container {
+  background-color: #ffffff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  height: 100%;
+  box-sizing: border-box;
+}
+</style>