修改

package-lock.json

@@ -13,6 +13,7 @@
         "@wangeditor/editor-for-vue": "5.1.12",
         "animate.css": "4.1.1",
         "axios": "1.4.0",
+        "echarts": "^5.4.3",
         "element-plus": "2.3.6",
         "lodash": "4.17.21",
         "moment": "2.29.4",
@@ -2041,6 +2042,20 @@
         "ssr-window": "^3.0.0-alpha.1"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
+      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.4"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.421",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.421.tgz",
@@ -5187,6 +5202,19 @@
       "engines": {
         "node": ">=10"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz",
+      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   },
   "dependencies": {
@@ -6664,6 +6692,22 @@
         "ssr-window": "^3.0.0-alpha.1"
       }
     },
+    "echarts": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
+      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.4"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "electron-to-chromium": {
       "version": "1.4.421",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.421.tgz",
@@ -9119,6 +9163,21 @@
       "resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
+    },
+    "zrender": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz",
+      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

package.json

@@ -17,6 +17,7 @@
     "@wangeditor/editor-for-vue": "5.1.12",
     "animate.css": "4.1.1",
     "axios": "1.4.0",
+    "echarts": "^5.4.3",
     "element-plus": "2.3.6",
     "lodash": "4.17.21",
     "moment": "2.29.4",
@@ -44,5 +45,4 @@
     "vite": "4.3.5",
     "vue-tsc": "1.6.4"
   }
-  
 }

src/main.ts

@@ -17,6 +17,10 @@ import '@/assets/icon/iconfont.css';
 
 // moment
 import moment from 'moment';
+
+// 引入 echarts
+
+import * as echarts from 'echarts';
 // lodash
 // import _ from 'lodash';
 
@@ -30,6 +34,8 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component);
 }
 app.config.globalProperties.$moment = moment;
+// 全局挂载 echarts
+app.config.globalProperties.$echarts = echarts;
 
 for (const componentItme in frameComponents) {
   app.component(componentItme, frameComponents[componentItme]);

src/stores/statistics/statistics.ts

@@ -0,0 +1,29 @@
+import { ref, computed } from 'vue';
+import { defineStore } from 'pinia';
+import { AxiosWrapper } from '@/util/axios-wrapper';
+import _ from 'lodash';
+
+import type { IQueryType, IQueryResult } from '@/util/types.util';
+const axios = new AxiosWrapper();
+const api = {
+  url: `/material/v1/api/Statistics`
+};
+export const StatisticsStore = defineStore('statistics', () => {
+  const count = ref(0);
+  const doubleCount = computed(() => count.value * 2);
+  function increment() {
+    count.value++;
+  }
+  const order = async (): Promise<IQueryResult> => {
+    const cond: IQueryType = {};
+    const res = await axios.$get(`${api.url}/order`, cond);
+    return res;
+  };
+  return {
+    count,
+    doubleCount,
+    increment,
+    order,
+    fetch
+  };
+});

src/views/goods/index.vue

@@ -19,8 +19,15 @@
         <el-col :span="24" class="dialog_one" v-if="dialog.type == '1'">
           <cForm :span="24" :fields="formFields" :form="form" :rules="rules" @save="onSubmit">
             <template #file>
-              <cUpload :model="`${'file'}`" :limit="6" listType="picture" url="/files/material/goods/upload" accept="*"
-                :list="form.file" @change="onUpload"></cUpload>
+              <cUpload
+                :model="`${'file'}`"
+                :limit="6"
+                listType="picture"
+                url="/files/material/goods/upload"
+                accept="*"
+                :list="form.file"
+                @change="onUpload"
+              ></cUpload>
             </template>
             <template #supplier_id>
               <el-option v-for="i in supplierList" :key="i._id" :label="i.name" :value="i._id"></el-option>

src/views/home/index.vue

@@ -2,7 +2,9 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <el-col :span="24" class="one">系统首页</el-col>
+        <el-col :span="24" class="one">
+          <div id="myChart" :style="{ width: '600px', height: '600px' }"></div>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -11,28 +13,73 @@
 <script setup lang="ts">
 // 基础
 import type { Ref } from 'vue';
-// reactive,
+import * as echarts from 'echarts';
 import { onMounted, ref, getCurrentInstance } from 'vue';
 // 接口
-//import { TestStore } from '@common/src/stores/test';
-//import type { IQueryResult } from '@/util/types.util';
-//const testAxios = TestStore();
+import { StatisticsStore } from '@/stores/statistics/statistics';
+import type { IQueryResult } from '@/util/types.util';
+const statisticsAxios = StatisticsStore();
 const { proxy } = getCurrentInstance() as any;
 // 加载中
 const loading: Ref<any> = ref(false);
-// 分页数据
-//  const skip = 0;
-//  const limit = proxy.limit;;
+const option: Ref<any> = ref({
+  title: {
+    text: '每月订单数量统计',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b} : {c} ({d}%)'
+  },
+  legend: {
+    left: 'center',
+    top: 'bottom'
+  },
+  toolbox: {
+    show: true
+  },
+  series: [
+    {
+      name: '订单数',
+      type: 'pie',
+      radius: [20, 140],
+      roseType: 'area',
+      itemStyle: {
+        borderRadius: 5
+      },
+      data: []
+    }
+  ]
+});
+const list: Ref<any> = ref([
+  { value: 30, name: '1月' },
+  { value: 28, name: '2月' },
+  { value: 26, name: '3月' },
+  { value: 24, name: '4月' },
+  { value: 22, name: '5月' },
+  { value: 20, name: '6月' },
+  { value: 18, name: '7月' },
+  { value: 18, name: '8月' },
+  { value: 18, name: '9月' },
+  { value: 18, name: '10月' },
+  { value: 18, name: '11月' },
+  { value: 16, name: '12月' }
+]);
 // 请求
 onMounted(async () => {
   loading.value = true;
-  //  await search({ skip, limit });
+  await search();
+  await initeCharts();
   loading.value = false;
 });
-//const search = async (e: { skip: number; limit: number }) => {
-//  const info = { skip: e.skip, limit: e.limit, ...searchInfo.value  };
-//  const res: IQueryResult = await testAxios.query(info);
-//  console.log(res);
-//};
+const search = async () => {
+  let res: IQueryResult = await statisticsAxios.order();
+  if (res.errcode == 0) option.value.series[0].data = res.data;
+};
+const initeCharts = () => {
+  let myChart = echarts.init(document.getElementById('myChart'));
+  // 绘制图表
+  myChart.setOption(option.value);
+};
 </script>
 <style scoped lang="scss"></style>