ADD: 使用echart

package-lock.json

@@ -12,6 +12,7 @@
         "@vueuse/core": "^10.4.1",
         "@vueuse/integrations": "^10.4.1",
         "axios": "^1.5.0",
+        "echarts": "^5.4.3",
         "element-plus": "^2.3.12",
         "gsap": "^3.12.2",
         "nprogress": "^0.2.0",
@@ -887,6 +888,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
+      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.4"
+      }
+    },
     "node_modules/element-plus": {
       "version": "2.3.12",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.12.tgz",
@@ -1368,6 +1378,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/universal-cookie": {
       "version": "6.1.0",
       "resolved": "https://registry.npmmirror.com/universal-cookie/-/universal-cookie-6.1.0.tgz",
@@ -1489,6 +1504,14 @@
       "engines": {
         "node": ">= 12"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz",
+      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
     }
   }
 }

package.json

@@ -13,6 +13,7 @@
     "@vueuse/core": "^10.4.1",
     "@vueuse/integrations": "^10.4.1",
     "axios": "^1.5.0",
+    "echarts": "^5.4.3",
     "element-plus": "^2.3.12",
     "gsap": "^3.12.2",
     "nprogress": "^0.2.0",

src/api/index.js

@@ -5,3 +5,8 @@ import axios from '@/axios'
 export function getStatistics1(){
     return axios.get("/admin/statistics1")
 }
+
+
+export function getStatistics3(type){
+    return axios.get("/admin/statistics3?type="+type)
+}
\ No newline at end of file

src/components/IndexChart.vue

+<template>
+    <el-card shadow="never">
+        <template #header>
+            <div class="flex justify-between">
+                <span class="text-sm">订单统计</span>
+                <div>
+                    <el-check-tag v-for="(item, index) in options" :key="index" :checked="current == item.value"
+                        style="margin-right: 8px" @click="handleChoose(item.value)">
+                        {{ item.text }}
+                    </el-check-tag>
+                </div>
+            </div>
+        </template>
+        <div id="chart" class="chart">
+
+        </div>
+    </el-card>
+</template>
+
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import * as echarts from 'echarts';
+
+import {
+    getStatistics3
+} from "@/api/index.js"
+const current = ref("week")
+
+const options = [{
+    text: "近一个月",
+    value: "month"
+}, {
+    text: "近一周",
+    value: "week"
+}, {
+    text: "近24小时",
+    value: "hour"
+}]
+
+
+function handleChoose(type) {
+    current.value = type
+    getData(current.value)
+}
+
+
+var myChart = null
+onMounted(() => {
+    var chartDom = document.getElementById('chart');
+    myChart = echarts.init(chartDom);
+    getData()
+})
+
+onBeforeUnmount(()=>{
+    if(myChart) echarts.dispose(myChart)
+
+})
+
+
+function getData() {
+    var option;
+    option = {
+        xAxis: {
+            type: 'category',
+            data: [],
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                data: [],
+                type: 'bar',
+                showBackground: true,
+                backgroundStyle: {
+                    color: 'rgba(180, 180, 180, 0.2)'
+                }
+            }
+        ]
+    };
+
+    myChart.showLoading()
+    getStatistics3(current.value).then(res => {
+        option.xAxis.data = res.x
+        option.series[0].data = res.y
+        myChart.setOption(option)
+    }).finally(()=>{
+        myChart.hideLoading()
+    })
+
+}
+</script>
+
+
+<style scoped>
+.chart{
+    height: 300px;
+    width: 100%;
+
+}
+</style>
\ No newline at end of file

src/layouts/components/FHeader.vue

@@ -117,6 +117,7 @@ const handleRefresh = () => location.reload()
 .f-header {
     @apply flex items-center bg-indigo-600 text-light-50 fixed top-0 left-0 right-0;
     height: 64px;
+    z-index: 1000;
 }
 
 

src/pages/index.vue

@@ -51,6 +51,14 @@
 
         <IndexNavs />
 
+        <el-row :gutter="20">
+            <el-col :span="12" :offset="0">
+                <IndexChart/>
+            </el-col>
+            <el-col :span="12" :offset="0"></el-col>
+        </el-row>
+        
+
 
     </div>
 </template>
@@ -63,6 +71,7 @@ import {
 } from "@/api/index.js"
 import CountTo from '@/components/CountTo.vue';
 import IndexNavs from '@/components/IndexNavs.vue';
+import IndexChart from '@/components/IndexChart.vue';
 
 const panels = ref([])