refactor: 控制台简化

Former-commit-id: bb17a4f93723eedcfce015b14d2d0c9fe5c48662
2023-01-21 16:50:25 +08:00
parent e0dfddeac3
commit c55eccf189
10 changed files with 100 additions and 597 deletions
--- a/src/views/dashboard/components/FunnelChart.vue
+++ b/src/views/dashboard/components/FunnelChart.vue
@@ -0,0 +1,131 @@
+<!-- 漏斗图 -->
+<template>
+  <div :id="id" :class="className" :style="{ height, width }" />
+</template>
+
+<script setup lang="ts">
+import {
+  nextTick,
+  onActivated,
+  onBeforeUnmount,
+  onDeactivated,
+  onMounted
+} from 'vue';
+import { init, EChartsOption } from 'echarts';
+import resize from '@/utils/resize';
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: 'funnelChart'
+  },
+  className: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: String,
+    default: '200px',
+    required: true
+  },
+  height: {
+    type: String,
+    default: '200px',
+    required: true
+  }
+});
+
+const { mounted, chart, beforeDestroy, activated, deactivated } = resize();
+
+function initChart() {
+  const funnelChart = init(document.getElementById(props.id) as HTMLDivElement);
+
+  funnelChart.setOption({
+    title: {
+      show: true,
+      text: '订单线索转化漏斗图',
+      x: 'center',
+      padding: 15,
+      textStyle: {
+        fontSize: 18,
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        color: '#337ecc'
+      }
+    },
+    grid: {
+      left: '2%',
+      right: '2%',
+      bottom: '10%',
+      containLabel: true
+    },
+    legend: {
+      x: 'center',
+      y: 'bottom',
+      data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
+    },
+
+    series: [
+      {
+        name: 'Funnel',
+        type: 'funnel',
+        left: '20%',
+        top: 60,
+        bottom: 60,
+        width: '60%',
+        sort: 'descending',
+        gap: 2,
+        label: {
+          show: true,
+          position: 'inside'
+        },
+        labelLine: {
+          length: 10,
+          lineStyle: {
+            width: 1,
+            type: 'solid'
+          }
+        },
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 1
+        },
+        emphasis: {
+          label: {
+            fontSize: 20
+          }
+        },
+        data: [
+          { value: 60, name: 'Visit' },
+          { value: 40, name: 'Inquiry' },
+          { value: 20, name: 'Order' },
+          { value: 80, name: 'Click' },
+          { value: 100, name: 'Show' }
+        ]
+      }
+    ]
+  } as EChartsOption);
+  chart.value = funnelChart;
+}
+
+onBeforeUnmount(() => {
+  beforeDestroy();
+});
+
+onActivated(() => {
+  activated();
+});
+
+onDeactivated(() => {
+  deactivated();
+});
+
+onMounted(() => {
+  mounted();
+  nextTick(() => {
+    initChart();
+  });
+});
+</script>
+
+<style lang="scss" scoped></style>