0.0.8

package.json

@@ -9,8 +9,11 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "ant-design-vue": "^1.3.7",
+    "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"

src/components/Chart.vue

@@ -0,0 +1,53 @@
+<template>
+  <div ref="chartDom"></div>
+</template>
+
+<script>
+import echarts from "echarts";
+import debounce from "lodash/debounce";
+import { addListener, removeListener } from "resize-detector";
+export default {
+  props: {
+    option: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    option(val) {
+      this.chart.setOption(val);
+    }
+    // option: {
+    //   handler(val) {
+    //     this.chart.setOption(val);
+    //   },
+    //   deep: true
+    // }
+  },
+  created() {
+    this.resize = debounce(this.resize, 300);
+  },
+  mounted() {
+    this.renderChart();
+    addListener(this.$refs.chartDom, this.resize);
+  },
+  beforeDestroy() {
+    removeListener(this.$refs.chartDom, this.resize);
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    resize() {
+      console.log("resize");
+      this.chart.resize();
+    },
+    renderChart() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = echarts.init(this.$refs.chartDom);
+      this.chart.setOption(this.option);
+    }
+  }
+};
+</script>
+
+<style></style>

src/utils/auth.js

@@ -1,5 +1,5 @@
 export function getCurrentAuthority() {
-  return ["user"];
+  return ["admin"];
 }
 
 export function check(authority) {

src/views/Dashboard/Analysis.vue

@@ -1,9 +1,49 @@
 <template>
-  <div>分析页</div>
+  <div>
+    <Chart :option="chartOption" style="height: 400px" />
+  </div>
 </template>
 
 <script>
-export default {};
+import random from "lodash/random";
+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]
+          }
+        ]
+      }
+    };
+  },
+  mounted() {
+    this.interval = setInterval(() => {
+      this.chartOption.series[0].data = this.chartOption.series[0].data.map(
+        () => random(100)
+      );
+      this.chartOption = { ...this.chartOption };
+    }, 3000);
+  },
+  beforeDestroy() {
+    clearInterval(this.interval);
+  },
+  components: {
+    Chart
+  }
+};
 </script>
 
 <style></style>