From 876325e3309c9ad46b7916068e3057ab03a5a96e Mon Sep 17 00:00:00 2001
From: w_lierxing <15510223171@163.com>
Date: Thu, 16 Dec 2021 15:39:20 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E5=AE=89=E8=A3=85v-echarts=E5=92=8Cecharts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                  |  4 +++-
 src/views/dashboard/index.vue | 29 +++++++++++++++++++++++++----
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 24138249e..61e902b3d 100644
--- a/package.json
+++ b/package.json
@@ -16,11 +16,13 @@
   "dependencies": {
     "axios": "0.18.1",
     "core-js": "3.6.5",
-    "element-ui": "2.13.2",
+    "echarts": "^4.1.0",
+    "element-ui": "^2.15.6",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "v-charts": "^1.19.0",
     "vue": "2.6.10",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 33e5ab6ec..c20dbfee6 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,18 +1,39 @@
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-text">name: {{ name }}</div>
+    <el-row>
+      <el-col :span="24">
+        <VeLine :data="chartData" />
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import VeLine from 'v-charts/lib/line.common'
 import { mapGetters } from 'vuex'
 
 export default {
   name: 'Dashboard',
+  components: {
+    VeLine
+  },
+  data() {
+    return {
+      chartData: {
+        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        rows: [
+          { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
+          { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
+          { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
+          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
+          { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
+          { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
+        ]
+      }
+    }
+  },
   computed: {
-    ...mapGetters([
-      'name'
-    ])
+    ...mapGetters(['name'])
   }
 }
 </script>

From 15864546984b3ceb308267071660dc9eb99eaab0 Mon Sep 17 00:00:00 2001
From: w_lierxing <15510223171@163.com>
Date: Thu, 16 Dec 2021 17:13:39 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E7=BB=98=E5=88=B6=E6=8A=98=E7=BA=BF?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/index.vue | 92 ++++++++++++++++++++++++++++++-----
 1 file changed, 80 insertions(+), 12 deletions(-)

diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index c20dbfee6..5e0d74fed 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,7 +2,9 @@
   <div class="dashboard-container">
     <el-row>
       <el-col :span="24">
-        <VeLine :data="chartData" />
+        <div class="chart-container container-height">
+          <VeLine :data="chartData" :height="lineChartFirstHeight" :legend="lineChartLegend" :grid="lineChartGrid" :extend="lineChartExtend" :settings="lineChartSettings" :y-axis="lineChartyAxis" />
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -18,16 +20,80 @@ export default {
     VeLine
   },
   data() {
+    this.lineChartyAxis = {
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: ['#EAEAEA']
+        }
+      },
+      axisLabel: {
+        show: true,
+        color: '#6F6F6F'
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#D6D6D6'
+        },
+        show: true
+      },
+      axisTick: {
+        show: false
+      }
+    }
+    this.lineChartSettings = {
+      itemStyle: {
+        color: ({ seriesIndex }) => {
+          return ['#FFBE5A', '#64D7B9'][seriesIndex]
+        }
+        // color: 'red', // ({ dataIndex }) => ['#FFBE5A', '#64D7B9'][dataIndex],
+      }
+    }
+    this.lineChartExtend = {
+      xAxis: {
+        show: true,
+        axisLabel: {
+          interval: 0,
+          show: true,
+          color: '#6F6F6F'
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#D6D6D6'
+          },
+          show: true
+        },
+        axisTick: {
+          show: false
+        }
+      },
+      series: (data) =>
+        data.map((item, i) => ({ ...item, itemStyle: { color: ['#FFBE5A', '#64D7B9', '#5587F0'][i] } })),
+    }
+    this.lineChartGrid = {
+      left: 18,
+      top: 16,
+      right: 18,
+      bottom: 42
+    }
+    this.lineChartLegend = {
+      bottom: 12,
+      left: 'center',
+      textStyle: {
+        color: '#6F6F6F'
+      }
+    }
     return {
+      lineChartFirstHeight: '206px',
       chartData: {
-        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        columns: ['日期', 'UV', 'PV'],
         rows: [
-          { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
-          { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
-          { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
-          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
-          { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
-          { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
+          { 日期: '第一周', UV: 1393, PV: 1093 },
+          { 日期: '第二周', UV: 3530, PV: 3230 },
+          { 日期: '第三周', UV: 2923, PV: 2623 },
+          { 日期: '第四周', UV: 1723, PV: 1423 },
+          { 日期: '第五周', UV: 3792, PV: 3492 },
+          { 日期: '第六周', UV: 4593, PV: 4293 }
         ]
       }
     }
@@ -42,10 +108,12 @@ export default {
 .dashboard {
   &-container {
     margin: 30px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
+    .chart-container {
+      width: 100%;
+    }
+    .container-height {
+      height: 206px;
+    }
   }
 }
 </style>

From b842cd3d7a0fd4d19505a1a61f5cbcf327f1da77 Mon Sep 17 00:00:00 2001
From: w_lierxing <15510223171@163.com>
Date: Thu, 16 Dec 2021 17:14:19 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E7=BB=98=E5=88=B6=E6=8A=98=E7=BA=BF?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 5e0d74fed..41c1e491e 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -68,7 +68,7 @@ export default {
         }
       },
       series: (data) =>
-        data.map((item, i) => ({ ...item, itemStyle: { color: ['#FFBE5A', '#64D7B9', '#5587F0'][i] } })),
+        data.map((item, i) => ({ ...item, itemStyle: { color: ['#FFBE5A', '#64D7B9', '#5587F0'][i] }}))
     }
     this.lineChartGrid = {
       left: 18,