echarts引入

package-lock.json

@@ -5987,6 +5987,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.2.1.tgz",
+      "integrity": "sha512-OJ79b22eqRfbSV8vYmDKmA+XWfNbr0Uk/OafWcFNIGDWti2Uw9A6eVCiJLmqPa9Sk+EWL+t5v26aak0z3gxiZw==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.2.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "editorconfig": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
@@ -15914,6 +15930,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.2.1.tgz",
+      "integrity": "sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==",
+      "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

@@ -16,6 +16,7 @@
     "better-scroll": "^1.15.2",
     "core-js": "^3.4.3",
     "dayjs": "^1.8.17",
+    "echarts": "^5.2.1",
     "element-ui": "^2.15.6",
     "faker": "^4.1.0",
     "flex.css": "^1.1.7",

src/main.js

@@ -12,15 +12,20 @@ import router from './router'
 import { menuHeader, menuAside } from '@/menu'
 import { frameInRoutes } from '@/router/routes'
 
+//echarts
+import * as echarts from "echarts"
+Vue.prototype.$echarts = echarts
+
 // 核心插件
 Vue.use(d2Admin)
 
+
 new Vue({
   router,
   store,
   i18n,
   render: h => h(App),
-  created () {
+  created() {
     // 处理路由 得到每一级的路由设置
     this.$store.commit('d2admin/page/init', frameInRoutes)
     // 设置顶栏菜单
@@ -30,7 +35,7 @@ new Vue({
     // 初始化菜单搜索功能
     this.$store.commit('d2admin/search/init', menuHeader)
   },
-  mounted () {
+  mounted() {
     // 展示系统信息
     this.$store.commit('d2admin/releases/versionShow')
     // 用户登录后从数据库加载一系列的设置

src/views/system/index/page.vue

@@ -49,6 +49,7 @@
     <el-row class="content contentX">
       <div class="page-content left-content">
         <span class="content-title">出入库数量趋势</span>
+        <div id="myChart" :style="{ width: '400px', height: '250px' }"></div>
       </div>
       <div class="page-content right-content">
         <span class="content-title">库区报警排名</span>
@@ -74,8 +75,58 @@ export default {
         return "two-row";
       }
     },
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById("myChart"));
+      // 绘制图表
+      myChart.setOption({
+        // title: { text: "在Vue中使用echarts" },
+        tooltip: {},
+        legend: {
+          data: ["出库", "入库"],
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "1月",
+            "2月",
+            "3月",
+            "4月",
+            "5月",
+            "6月",
+            "7月",
+            "8月",
+            "9月",
+            "10月",
+            "11月",
+            "12月",
+          ],
+        },
+        yAxis: { type: "value" },
+        series: [
+          {
+            name: "出库",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90],
+          },
+          {
+            name: "入库",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            data: [220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90],
+          },
+        ],
+      });
+    },
   },
   created() {},
+  mounted() {
+    this.drawLine();
+  },
 };
 </script>
 
@@ -166,6 +217,9 @@ export default {
   .tzggListLi {
     float: right;
   }
+  #myChart {
+    margin: 0 auto;
+  }
   // .btn-group {
   //   color: $color-text-placehoder;
   //   font-size: 12px;