.

package.json

@@ -9,7 +9,9 @@
     "dev": "vite"
   },
   "dependencies": {
+    "@j-t-mcc/vue3-chartjs": "^1.1.2",
     "apexcharts": "^3.27.2",
+    "chart.js": "^3.4.1",
     "core-js": "^3.6.5",
     "element-plus": "^1.0.2-beta.55",
     "feather-icons": "^4.28.0",

src/components/dashboard/OrderChart.vue

@@ -1,80 +1,80 @@
 <template>
     <el-col class="dashboard-col">
         <div class="dashboard-card">
-            <apexchart type="bar" height="350" stacked="true" :options="chartOptions" :series="series"></apexchart>
+            <div class="card-body">
+                <div class="chart-title">
+                    <div class="name">订单</div>
+                    <div class="value">2,76k</div>
+                </div>
+                <div style="height: 100px">
+                    <chart v-bind="{ ...chart }"></chart>
+                </div>
+            </div>
         </div>
     </el-col>
 </template>
 <script>
+import chart from '@j-t-mcc/vue3-chartjs';
+let delayed = false;
 export default {
+    components: { chart },
     data() {
         return {
-            series: [
-                {
-                    name: '2020',
-                    data: [45, 85, 65, 45, 65]
-                }
-            ],
-            chartOptions: {
-                chart: {
-                    type: 'bar',
-                    stacked: true,
-                    toolbar: {
-                        show: false
-                    }
-                },
-                grid: {
-                    show: false,
-                    padding: {
-                        left: 0,
-                        right: 0,
-                        top: -15,
-                        bottom: -15
-                    }
-                },
-                plotOptions: {
-                    bar: {
-                        horizontal: false,
-                        columnWidth: '10%',
-                        startingShape: 'rounded',
-                        borderRadius: 10,
-                        colors: {
-                            backgroundBarColors: [
-                                'rgba(0, 0, 0, 0.05)',
-                                'rgba(0, 0, 0, 0.15)',
-                                'rgba(0, 0, 0, 0.15)',
-                                'rgba(0, 0, 0, 0.15)',
-                                'rgba(0, 0, 0, 0.15)'
-                            ],
-                            backgroundBarRadius: 10
+            chart: {
+                type: 'bar',
+                options: {
+                    animation: {
+                        onComplete: () => {
+                            delayed = true;
+                        },
+                        delay: context => {
+                            let delay = 0;
+                            if (context.type === 'data' && context.mode === 'default' && !delayed) {
+                                delay = context.dataIndex * 100 + context.datasetIndex * 100;
+                            }
+                            return delay;
                         }
-                    }
-                },
-                legend: {
-                    show: false
-                },
-                dataLabels: {
-                    enabled: false
-                },
-                colors: ['rgba(255, 159, 67, 0.85)'],
-                xaxis: {
-                    labels: {
-                        show: false
                     },
-                    axisBorder: {
-                        show: false
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
                     },
-                    axisTicks: {
-                        show: false
+                    scales: {
+                        xAxis: {
+                            display: false,
+                            grid: {
+                                display: false
+                            }
+                        },
+                        yAxis: {
+                            display: false,
+                            grid: {
+                                display: false
+                            }
+                        }
                     }
                 },
-                yaxis: {
-                    show: false
-                },
-                tooltip: {
-                    x: {
-                        show: false
-                    }
+                data: {
+                    labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs', 'AngularJs'],
+                    datasets: [
+                        {
+                            label: 'My First Dataset',
+                            backgroundColor: [
+                                'rgba(255, 159, 67, 0.85)',
+                                'rgba(255, 159, 67, 0.85)',
+                                'rgba(255, 159, 67, 0.85)',
+                                'rgba(255, 159, 67, 0.85)',
+                                'rgba(255, 159, 67, 0.85)'
+                            ],
+                            data: [40, 20, 50, 45, 55],
+                            barPercentage: 0.2,
+                            borderRadius: 1000,
+                            borderSkipped: 0
+                        }
+                    ]
                 }
             }
         };
@@ -83,4 +83,17 @@ export default {
 </script>
 <style lang="less" scoped>
 @import url(./card.less);
+.chart-title {
+    .name {
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--text-color-2);
+    }
+    .value {
+        font-size: 24px;
+        font-weight: 600;
+        margin-top: 6px;
+        color: var(--text-color-2);
+    }
+}
 </style>

src/components/dashboard/ProfitChart.vue

@@ -0,0 +1,83 @@
+<template>
+    <el-col class="dashboard-col">
+        <div class="dashboard-card">
+            <div class="card-body">
+                <div class="chart-title">
+                    <div class="name">收益</div>
+                    <div class="value">5,13k</div>
+                </div>
+                <div style="height: 100px">
+                    <chart v-bind="{ ...chart }"></chart>
+                </div>
+            </div>
+        </div>
+    </el-col>
+</template>
+<script>
+import chart from '@j-t-mcc/vue3-chartjs';
+export default {
+    components: { chart },
+    data() {
+        return {
+            chart: {
+                type: 'line',
+                data: {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [
+                        {
+                            label: 'Profit',
+                            data: [65, 55, 80, 60, 85, 65, 95],
+                            fill: false,
+                            borderColor: 'rgba(0, 207, 232, 0.85)',
+                            backgroundColor: 'rgba(0, 207, 232, 0.85)',
+                            borderWidth: 4
+                        }
+                    ]
+                },
+                options: {
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        xAxis: {
+                            display: true,
+                            grid: {
+                                display: true,
+                                borderDash: [10, 10, 10, 10, 10, 10, 10],
+                                drawBorder: false,
+                                lineWidth: 2
+                            },
+                            ticks: { display: false }
+                        },
+                        yAxis: {
+                            display: false,
+                            grid: {
+                                display: false
+                            }
+                        }
+                    }
+                }
+            }
+        };
+    }
+};
+</script>
+<style lang="less" scoped>
+@import url(./card.less);
+.chart-title {
+    .name {
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--text-color-2);
+    }
+    .value {
+        font-size: 24px;
+        font-weight: 600;
+        margin-top: 6px;
+        color: var(--text-color-2);
+    }
+}
+</style>

src/components/dashboard/Statistics.vue

@@ -2,7 +2,7 @@
     <el-col class="dashboard-col">
         <div class="dashboard-card">
             <div class="card-header">
-                <div class="card-header__text">Statistics</div>
+                <div class="card-header__text">数据概览</div>
             </div>
             <div class="card-body">
                 <el-row class="wrapper">
@@ -33,28 +33,28 @@ export default {
         return {
             statistics: [
                 {
-                    name: 'Sales',
+                    name: '销售',
                     value: '230k',
                     icon: 'trending-up',
                     color: '#7367f0',
                     bg: 'rgba(115,103,240,.12)'
                 },
                 {
-                    name: 'Customers',
+                    name: '用户',
                     value: '8.549k',
                     icon: 'user',
                     color: '#00cfe8',
                     bg: 'rgba(0,207,232,.12)'
                 },
                 {
-                    name: 'Products',
+                    name: '产品',
                     value: '1.423k',
                     icon: 'box',
                     color: '#ea5455',
                     bg: 'rgba(234,84,85,.12)'
                 },
                 {
-                    name: 'Revenue',
+                    name: '收益',
                     value: '$9745',
                     icon: 'dollar-sign',
                     color: '#28c76f',

src/style/app.less

@@ -68,7 +68,6 @@ button {
 .el-form--label-top .el-form-item__label {
     padding: 0 !important;
 }
-
 .h100 {
     height: 100%;
 }

src/views/Dashboard.vue

@@ -5,7 +5,7 @@
             <statistics :xs="24" :md="24" :lg="16"></statistics>
         </el-row>
         <el-row :gutter="20">
-            <order-chart></order-chart>
+            <order-chart :xs="12" :sm="12"></order-chart><profit-chart :xs="12" :sm="12"></profit-chart>
         </el-row>
     </div>
 </template>
@@ -13,8 +13,9 @@
 import Statistics from '../components/dashboard/Statistics.vue';
 import Award from '../components/dashboard/Award.vue';
 import OrderChart from '../components/dashboard/OrderChart.vue';
+import ProfitChart from '../components/dashboard/ProfitChart.vue';
 export default {
-    components: { Statistics, Award, OrderChart },
+    components: { Statistics, Award, OrderChart, ProfitChart },
     data() {
         return {};
     }

src/views/Index.vue

@@ -1,12 +1,47 @@
 <template>
-    <el-container class="h100">
-        <el-aside class="hidden-xs-only aside-menu">
-            <div class="logo-wrapper">
-                <img src="../assets/logo-title-l.png" class="logo" />
-            </div>
-            <div class="menu-wrapper">
-                <el-menu default-active="2">
-                    <el-submenu index="1">
+    <div class="hidden-xs-only app-menu h100">
+        <div class="logo-wrapper">
+            <img src="../assets/logo-title-l.png" class="logo" />
+        </div>
+        <div class="menu-wrapper">
+            <el-menu default-active="2">
+                <el-submenu index="1">
+                    <template #title>
+                        <i class="el-icon-location"></i>
+                        <span>导航一</span>
+                    </template>
+                    <el-menu-item-group>
+                        <template #title>分组一</template>
+                        <el-menu-item index="1-1">选项1</el-menu-item>
+                        <el-menu-item index="1-2">选项2</el-menu-item>
+                    </el-menu-item-group>
+                    <el-menu-item-group title="分组2">
+                        <el-menu-item index="1-3">选项3</el-menu-item>
+                    </el-menu-item-group>
+                    <el-submenu index="1-4">
+                        <template #title>选项4</template>
+                        <el-menu-item index="1-4-1">选项1</el-menu-item>
+                    </el-submenu>
+                </el-submenu>
+                <el-menu-item index="2">
+                    <i class="el-icon-menu"></i>
+                    <template #title>导航二</template>
+                </el-menu-item>
+                <el-menu-item index="3" disabled>
+                    <i class="el-icon-document"></i>
+                    <template #title>导航三</template>
+                </el-menu-item>
+                <el-menu-item index="4">
+                    <i class="el-icon-setting"></i>
+                    <template #title>导航四</template>
+                </el-menu-item>
+                <el-menu-item-group>
+                    <template #title>分组三</template>
+                    <el-menu-item index="5">
+                        <i class="el-icon-document"></i>
+                        <template #title>导航三</template>
+                    </el-menu-item>
+                    <el-submenu index="6">
                         <template #title>
                             <i class="el-icon-location"></i>
                             <span>导航一</span>
@@ -24,72 +59,37 @@
                             <el-menu-item index="1-4-1">选项1</el-menu-item>
                         </el-submenu>
                     </el-submenu>
-                    <el-menu-item index="2">
-                        <i class="el-icon-menu"></i>
-                        <template #title>导航二</template>
-                    </el-menu-item>
-                    <el-menu-item index="3" disabled>
-                        <i class="el-icon-document"></i>
-                        <template #title>导航三</template>
-                    </el-menu-item>
-                    <el-menu-item index="4">
-                        <i class="el-icon-setting"></i>
-                        <template #title>导航四</template>
-                    </el-menu-item>
-                    <el-menu-item-group>
-                        <template #title>分组三</template>
-                        <el-menu-item index="5">
-                            <i class="el-icon-document"></i>
-                            <template #title>导航三</template>
-                        </el-menu-item>
-                        <el-submenu index="6">
-                            <template #title>
-                                <i class="el-icon-location"></i>
-                                <span>导航一</span>
-                            </template>
-                            <el-menu-item-group>
-                                <template #title>分组一</template>
-                                <el-menu-item index="1-1">选项1</el-menu-item>
-                                <el-menu-item index="1-2">选项2</el-menu-item>
-                            </el-menu-item-group>
-                            <el-menu-item-group title="分组2">
-                                <el-menu-item index="1-3">选项3</el-menu-item>
-                            </el-menu-item-group>
-                            <el-submenu index="1-4">
-                                <template #title>选项4</template>
-                                <el-menu-item index="1-4-1">选项1</el-menu-item>
-                            </el-submenu>
-                        </el-submenu>
-                    </el-menu-item-group>
-                </el-menu>
-            </div>
-            <div class="menu-mask"></div>
-        </el-aside>
-        <el-main class="index-main">
-            <div class="index-header__wrapper">
-                <div class="index-header__main">
-                    <div class="badge-icon__wrapper">
-                        <feather-icon name="moon" size="21"></feather-icon>
-                    </div>
-                    <div class="badge-icon__wrapper">
-                        <el-badge :value="9" class="badge-icon">
-                            <feather-icon name="bell" size="21"></feather-icon>
-                        </el-badge>
-                    </div>
-                    <div class="name__wrapper">
-                        <div class="nickname">超级管理员</div>
-                        <div class="username">admin</div>
-                    </div>
-                    <div class="avatar__wrapper">
-                        <img src="../assets/avatar_male.png" class="avatar" />
-                    </div>
+                </el-menu-item-group>
+            </el-menu>
+        </div>
+        <div class="menu-mask"></div>
+    </div>
+    <div class="app-content">
+        <router-view>
+            <template v-slot="{ Component }">
+                <component :is="Component" class="index__content" />
+            </template>
+        </router-view>
+        <div class="app-header__wrapper">
+            <div class="app-header__main">
+                <div class="badge-icon__wrapper">
+                    <feather-icon name="moon" size="21"></feather-icon>
+                </div>
+                <div class="badge-icon__wrapper">
+                    <el-badge :value="9" class="badge-icon">
+                        <feather-icon name="bell" size="21"></feather-icon>
+                    </el-badge>
+                </div>
+                <div class="name__wrapper">
+                    <div class="nickname">超级管理员</div>
+                    <div class="username">admin</div>
+                </div>
+                <div class="avatar__wrapper">
+                    <img src="../assets/avatar_male.png" class="avatar" />
                 </div>
             </div>
-            <div class="index__content">
-                <router-view></router-view>
-            </div>
-        </el-main>
-    </el-container>
+        </div>
+    </div>
 </template>
 <script>
 export default {
@@ -99,15 +99,21 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-.index-container {
-    height: 100%;
-}
-.aside-menu {
+.app-menu {
     background-color: var(--background-color-1);
     display: flex;
     flex-direction: column;
-    position: relative;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 280px;
     .logo-wrapper {
+        display: flex;
+        justify-content: center;
+        .logo {
+            height: 50px;
+            margin-top: 20px;
+        }
     }
     .menu-wrapper {
         flex-basis: 0;
@@ -127,24 +133,19 @@ export default {
         display: none;
     }
 }
-.logo-wrapper {
-    display: flex;
-    justify-content: center;
-    .logo {
-        height: 50px;
-        margin-top: 20px;
-    }
-}
-.index-main {
+
+.app-content {
     padding: 0;
     position: relative;
-    .index-header__wrapper {
+    margin-left: 280px;
+    .app-header__wrapper {
         padding: 20px 20px 20px 20px;
-        position: absolute;
+        position: fixed;
         top: 0;
         right: 0;
         left: 0;
-        .index-header__main {
+        margin-left: 280px;
+        .app-header__main {
             height: 60px;
             background-color: @bg1-light;
             border-radius: 6px;
@@ -196,30 +197,28 @@ export default {
         }
     }
     .index__content {
-        padding: 100px 20px 20px 20px;
-        box-sizing: border-box;
-        overflow: auto;
-        height: 100%;
+        padding: 100px 20px 0 20px;
+    }
+    @media only screen and (max-width: 768px) {
+        margin-left: 0px;
+        .app-header__wrapper {
+            margin-left: 0;
+        }
     }
 }
 </style>
 <style lang="less">
 [theme='light'] {
-    .aside-menu {
+    .app-menu {
         box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.05);
     }
     .menu-mask {
         background: linear-gradient(180deg, @bg1-light, fade(@bg1-light, 0%));
     }
-    .index-header__wrapper {
-        background: linear-gradient(
-            180deg,
-            fade(@bg2-light, 90%) 0%,
-            fade(@bg2-light, 100%) 73%,
-            fade(@bg2-light, 50%)
-        );
+    .app-header__wrapper {
+        background: linear-gradient(180deg, fade(@bg2-light, 80%) 0%, fade(@bg2-light, 70%) 80%, fade(@bg2-light, 0%));
     }
-    .index-header__main {
+    .app-header__main {
         .name__wrapper {
             .nickname {
                 color: var(--text-color-2);

yarn.lock

@@ -944,6 +944,11 @@
     cssnano-preset-default "^4.0.0"
     postcss "^7.0.0"
 
+"@j-t-mcc/vue3-chartjs@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.nlark.com/@j-t-mcc/vue3-chartjs/download/@j-t-mcc/vue3-chartjs-1.1.2.tgz#aa1ee95f2ecb9874e3d7af22d011519de7490d2b"
+  integrity sha1-qh7pXy7LmHTj168i0BFRnedJDSs=
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.nlark.com/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -2653,6 +2658,11 @@ chardet@^0.7.0:
   resolved "https://registry.nlark.com/chardet/download/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha1-kAlISfCTfy7twkJdDSip5fDLrZ4=
 
+chart.js@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.nlark.com/chart.js/download/chart.js-3.4.1.tgz#ff3b2b2a04a37b83618b4a6399a5f87ccc0f1e8a"
+  integrity sha1-/zsrKgSje4Nhi0pjmaX4fMwPHoo=
+
 check-types@^8.0.3:
   version "8.0.3"
   resolved "https://registry.nlark.com/check-types/download/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"