ADD file via upload

4 months ago · c58b7a3dc0
parent 6fbde35857
commit c58b7a3dc0
1 changed files with 126 additions and 0 deletions
--- a/HomeChart.vue
+++ b/HomeChart.vue
@ -0,0 +1,126 @@
+<template>
+  <div id="home-chart" style="width:100%;height:400px;"></div>
+</template>
+<script>
+export default {
+  mounted() {
+    this.homeChart();
+  },
+  methods: {
+    homeChart() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = this.$echarts.init(document.getElementById("home-chart"));
+      // 指定图表的配置项和数据
+      var option = {
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          data: ["访问量", "用户量", "收入"]
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        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: "总量",
+            data: [
+              120,
+              132,
+              101,
+              134,
+              90,
+              230,
+              210,
+              120,
+              132,
+              101,
+              134,
+              90,
+              230
+            ]
+          },
+          {
+            name: "用户量",
+            type: "line",
+            stack: "总量",
+            data: [
+              220,
+              182,
+              191,
+              234,
+              290,
+              330,
+              310,
+              182,
+              191,
+              234,
+              290,
+              330,
+              310
+            ]
+          },
+          {
+            name: "收入",
+            type: "line",
+            stack: "总量",
+            data: [
+              150,
+              232,
+              201,
+              154,
+              190,
+              330,
+              410,
+              232,
+              201,
+              154,
+              190,
+              330,
+              410
+            ]
+          }
+        ]
+      };
+      // // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      //根据窗口的大小变动图表
+      window.onresize = function() {
+        myChart.resize();
+      };
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+#home-chart {
+  background: #ffffff;
+  padding: 20px 0;
+}
+</style>