系统首页，统计图

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.27.2",
     "core-js": "^3.6.5",
+    "echarts": "^5.4.0",
     "element-ui": "^2.15.10",
     "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.21",

src/views/index.vue

@@ -1,25 +1,312 @@
 <template>
-  <div id="index">count</div>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight">
+        <el-col :span="24" class="two">
+          <el-col :span="24">
+            <el-col :span="5">
+              <el-card class="box-card">
+                <el-col :span="8">
+                  <i class="icon_1 el-icon-box"></i>
+                </el-col>
+                <el-col :span="12" class="title">
+                  <p><span>24</span>（单）</p>
+                  <p>本月未发货数量</p>
+                </el-col>
+              </el-card>
+            </el-col>
+            <el-col :span="5">
+              <el-card class="box-card">
+                <el-col :span="8">
+                  <i class="icon_2 el-icon-truck"></i>
+                </el-col>
+                <el-col :span="12" class="title">
+                  <p><span>24</span>（单）</p>
+                  <p>本月已发货数量</p>
+                </el-col>
+              </el-card>
+            </el-col>
+            <el-col :span="5">
+              <el-card class="box-card">
+                <el-col :span="8">
+                  <i class="icon_3 el-icon-sell"></i>
+                </el-col>
+                <el-col :span="12" class="title">
+                  <p><span>24</span>（单）</p>
+                  <p>本月退款数量</p>
+                </el-col>
+              </el-card>
+            </el-col>
+            <el-col :span="5">
+              <el-card class="box-card">
+                <el-col :span="8">
+                  <i class="icon_4 el-icon-sell"></i>
+                </el-col>
+                <el-col :span="12" class="title">
+                  <p><span>24</span>（单）</p>
+                  <p>本月退货数量</p>
+                </el-col>
+              </el-card>
+            </el-col>
+          </el-col>
+          <el-col :span="11">
+            <el-card class="box-card"><card-1></card-1></el-card>
+          </el-col>
+          <el-col :span="11">
+            <el-card class="box-card"><card-2></card-2></el-card>
+          </el-col>
+          <el-col :span="11">
+            <el-card class="box-card"><card-3></card-3> </el-card>
+          </el-col>
+          <el-col :span="11">
+            <el-card class="box-card"><card-4></card-4></el-card>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
+import * as echarts from 'echarts';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    card1: () => import('./parts/card-1.vue'),
+    card2: () => import('./parts/card-2.vue'),
+    card3: () => import('./parts/card-3.vue'),
+    card4: () => import('./parts/card-4.vue'),
+  },
   data: function () {
     return {};
   },
   computed: {
     ...mapState(['user']),
   },
+  mounted() {
+    this.getEchartData_one();
+    this.getEchartData_two();
+    this.getEchartData_thr();
+    this.getEchartData_fou();
+  },
   created() {},
-  methods: {},
+  methods: {
+    getEchartData_one(data) {
+      var chartDom = document.getElementById('card_one');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        title: {
+          text: '收益统计',
+        },
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: 'line',
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+    getEchartData_two() {
+      var chartDom = document.getElementById('card_two');
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: '收益统计',
+        },
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+    getEchartData_thr() {
+      var chartDom = document.getElementById('card_thr');
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: '销量占比',
+          subtext: 'Fake Data',
+          left: 'center',
+        },
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 1048, name: 'Search Engine' },
+              { value: 735, name: 'Direct' },
+              { value: 580, name: 'Email' },
+              { value: 484, name: 'Union Ads' },
+              { value: 300, name: 'Video Ads' },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              },
+            },
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+    getEchartData_fou() {
+      var chartDom = document.getElementById('card_fou');
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: '商品销量对比',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['商品一', '商品二', '商品三', '商品四', '商品五', '商品六'],
+        },
+        series: [
+          {
+            name: '本月',
+            type: 'bar',
+            data: [122, 45, 78, 233, 56, 75],
+          },
+          {
+            name: '上月',
+            type: 'bar',
+            data: [234, 134, 54, 27, 145, 87],
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+  },
   metaInfo() {
     return { title: this.$route.meta.title };
   },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.two {
+  margin: 5px;
+  .title {
+    p {
+      text-align: center;
+      span:first-child {
+        color: aquamarine;
+        font-size: 24px;
+      }
+    }
+  }
+  .data-table {
+    margin: 5px 0;
+  }
+  .el-col-5 {
+    width: 22.5%;
+  }
+  .el-col {
+    margin: 0 4px;
+  }
+  .box-card {
+    margin: 5px;
+    padding: 5px 0 20px 0;
+  }
+  .item {
+    margin-bottom: 18px;
+  }
+  .icon {
+    font-size: 36px;
+    padding: 10px;
+    color: #fff;
+    border-radius: 50%;
+  }
+  .icon_1 {
+    font-size: 36px;
+    padding: 10px;
+    color: #fff;
+    border-radius: 50%;
+    background-color: aquamarine;
+  }
+  .icon_2 {
+    font-size: 36px;
+    padding: 10px;
+    color: #fff;
+    border-radius: 50%;
+    background-color: aqua;
+  }
+  .icon_3 {
+    font-size: 36px;
+    padding: 10px;
+    color: #fff;
+    border-radius: 50%;
+    background-color: rgb(253, 184, 135);
+  }
+  .icon_4 {
+    font-size: 36px;
+    padding: 10px;
+    color: #fff;
+    border-radius: 50%;
+    background-color: rgb(255, 244, 148);
+  }
+}
+</style>

src/views/parts/card-1.vue

@@ -0,0 +1,70 @@
+<template>
+  <div id="card-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div id="card_one" style="width: 100%; height: 17vw"></div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: function () {
+    return {};
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {
+    this.getEchartData_one();
+  },
+  created() {},
+  methods: {
+    getEchartData_one(data) {
+      var chartDom = document.getElementById('card_one');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        title: {
+          text: '收益统计',
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: 'line',
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/parts/card-2.vue

@@ -0,0 +1,72 @@
+<template>
+  <div id="card-2">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div id="card_two" style="width: 100%; height: 17vw"></div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: function () {
+    return {};
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {
+    this.getEchartData_two();
+  },
+  created() {},
+  methods: {
+    getEchartData_two() {
+      var chartDom = document.getElementById('card_two');
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: '收益统计',
+        },
+                tooltip: {
+          trigger: 'axis',
+        },
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/parts/card-3.vue

@@ -0,0 +1,86 @@
+<template>
+  <div id="card-3">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div id="card_thr" style="width: 100%; height: 17vw"></div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: function () {
+    return {};
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {
+    this.getEchartData_thr();
+  },
+  created() {},
+  methods: {
+    getEchartData_thr() {
+      var chartDom = document.getElementById('card_thr');
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: '销量占比',
+          subtext: 'Fake Data',
+          left: 'center',
+        },
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 1048, name: 'Search Engine' },
+              { value: 735, name: 'Direct' },
+              { value: 580, name: 'Email' },
+              { value: 484, name: 'Union Ads' },
+              { value: 300, name: 'Video Ads' },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              },
+            },
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/parts/card-4.vue

@@ -0,0 +1,88 @@
+<template>
+  <div id="card-4">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div id="card_fou" style="width: 100%; height: 17vw"></div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: function () {
+    return {};
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {
+    this.getEchartData_fou();
+  },
+  created() {},
+  methods: {
+    getEchartData_fou() {
+      var chartDom = document.getElementById('card_fou');
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: '商品销量对比',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['商品一', '商品二', '商品三', '商品四', '商品五', '商品六'],
+        },
+        series: [
+          {
+            name: '本月',
+            type: 'bar',
+            data: [122, 45, 78, 233, 56, 75],
+          },
+          {
+            name: '上月',
+            type: 'bar',
+            data: [234, 134, 54, 27, 145, 87],
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>