0.0.9

mock/dashboard_chart.js

@@ -0,0 +1,13 @@
+function chart(method) {
+  let res = null;
+  switch (method) {
+    case "GET":
+      res = [100, 40, 78, 10, 30, 48];
+      break;
+    default:
+      res = null;
+  }
+  return res;
+}
+
+module.exports = chart;

package-lock.json

@@ -2115,6 +2115,15 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
       "dev": true
     },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "http://registry.npm.taobao.org/axios/download/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "1.7.0",
+        "is-buffer": "1.1.6"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "http://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
@@ -6013,7 +6022,6 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz",
       "integrity": "sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==",
-      "dev": true,
       "requires": {
         "debug": "3.2.6"
       },
@@ -6022,7 +6030,6 @@
           "version": "3.2.6",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
           "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
           "requires": {
             "ms": "2.1.1"
           }
@@ -7644,8 +7651,7 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "is-callable": {
       "version": "1.1.4",
@@ -10206,8 +10212,7 @@
     "ms": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
-      "dev": true
+      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
     },
     "multicast-dns": {
       "version": "6.2.3",

package.json

@@ -1,48 +1,49 @@
 {
-  "name": "ant-design-vue-pro",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit"
-  },
-  "dependencies": {
-    "ant-design-vue": "^1.3.8",
-    "echarts": "^4.2.1",
-    "moment": "^2.24.0",
-    "nprogress": "^0.2.0",
-    "resize-detector": "^0.2.0",
-    "vue": "^2.6.6",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.5.0",
-    "@vue/cli-plugin-eslint": "^3.5.0",
-    "@vue/cli-plugin-unit-jest": "^3.5.0",
-    "@vue/cli-service": "^3.5.0",
-    "@vue/eslint-config-prettier": "^4.0.1",
-    "@vue/test-utils": "1.0.0-beta.29",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
-    "babel-plugin-import": "^1.11.0",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "less": "^3.0.4",
-    "less-loader": "^4.1.0",
-    "lint-staged": "^8.1.4",
-    "vue-template-compiler": "^2.5.21"
-  },
-  "gitHooks": {
-    "pre-commit": "lint-staged"
-  },
-  "lint-staged": {
-    "*.{js,vue}": [
-      "vue-cli-service lint",
-      "git add"
-    ]
-  }
+    "name": "ant-design-vue-pro",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "serve": "vue-cli-service serve",
+        "build": "vue-cli-service build",
+        "lint": "vue-cli-service lint",
+        "test:unit": "vue-cli-service test:unit"
+    },
+    "dependencies": {
+        "ant-design-vue": "^1.3.8",
+        "axios": "^0.18.0",
+        "echarts": "^4.2.1",
+        "moment": "^2.24.0",
+        "nprogress": "^0.2.0",
+        "resize-detector": "^0.2.0",
+        "vue": "^2.6.6",
+        "vue-router": "^3.0.1",
+        "vuex": "^3.0.1"
+    },
+    "devDependencies": {
+        "@vue/cli-plugin-babel": "^3.5.0",
+        "@vue/cli-plugin-eslint": "^3.5.0",
+        "@vue/cli-plugin-unit-jest": "^3.5.0",
+        "@vue/cli-service": "^3.5.0",
+        "@vue/eslint-config-prettier": "^4.0.1",
+        "@vue/test-utils": "1.0.0-beta.29",
+        "babel-core": "7.0.0-bridge.0",
+        "babel-eslint": "^10.0.1",
+        "babel-jest": "^23.6.0",
+        "babel-plugin-import": "^1.11.0",
+        "eslint": "^5.8.0",
+        "eslint-plugin-vue": "^5.0.0",
+        "less": "^3.0.4",
+        "less-loader": "^4.1.0",
+        "lint-staged": "^8.1.4",
+        "vue-template-compiler": "^2.5.21"
+    },
+    "gitHooks": {
+        "pre-commit": "lint-staged"
+    },
+    "lint-staged": {
+        "*.{js,vue}": [
+            "vue-cli-service lint",
+            "git add"
+        ]
+    }
 }

src/views/Dashboard/Analysis.vue

@@ -5,38 +5,45 @@
 </template>
 
 <script>
-import random from "lodash/random";
+import axios from "axios";
 import Chart from "../../components/Chart";
 export default {
   data() {
     return {
-      chartOption: {
-        title: {
-          text: "ECharts 入门示例"
-        },
-        tooltip: {},
-        xAxis: {
-          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
-        },
-        yAxis: {},
-        series: [
-          {
-            name: "销量",
-            type: "bar",
-            data: [5, 20, 36, 10, 10, 20]
-          }
-        ]
-      }
+      chartOption: {}
     };
   },
   mounted() {
+    this.getChartData();
     this.interval = setInterval(() => {
-      this.chartOption.series[0].data = this.chartOption.series[0].data.map(
-        () => random(100)
-      );
-      this.chartOption = { ...this.chartOption };
+      this.getChartData();
     }, 3000);
   },
+  methods: {
+    getChartData() {
+      axios
+        .get("/api/dashboard/chart", { params: { ID: 12345 } })
+        .then(response => {
+          this.chartOption = {
+            title: {
+              text: "ECharts 入门示例"
+            },
+            tooltip: {},
+            xAxis: {
+              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+            },
+            yAxis: {},
+            series: [
+              {
+                name: "销量",
+                type: "bar",
+                data: response.data
+              }
+            ]
+          };
+        });
+    }
+  },
   beforeDestroy() {
     clearInterval(this.interval);
   },

vue.config.js

@@ -5,5 +5,27 @@ module.exports = {
         javascriptEnabled: true
       }
     }
+  },
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:3000",
+        bypass: function(req, res) {
+          if (req.headers.accept.indexOf("html") !== -1) {
+            console.log("Skipping proxy for browser request.");
+            return "/index.html";
+          } else {
+            const name = req.path
+              .split("/api/")[1]
+              .split("/")
+              .join("_");
+            const mock = require(`./mock/${name}`);
+            const result = mock(req.method);
+            delete require.cache[require.resolve(`./mock/${name}`)];
+            return res.send(result);
+          }
+        }
+      }
+    }
   }
 };