数据报表完成

coderlw · coderlw · commit a111a79a1618 · 2021-10-06T17:29:56.000+08:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.21.4",
     "core-js": "^3.6.5",
+    "echarts": "^5.2.1",
     "element-ui": "^2.15.6",
     "less": "^4.1.1",
     "less-loader": "^10.0.1",
diff --git a/src/components/reports/Reports.vue b/src/components/reports/Reports.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <!-- 面包屑区域 -->
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
+      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-card>
+      <div id="main" style="width: 700px;height:400px;"></div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import _ from 'lodash'
+
+export default {
+  name: '',
+  data() {
+    return {
+      options: {
+        title: {
+          text: '用户来源'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#E9EEF3'
+            }
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            boundaryGap: false
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ]
+      }
+    }
+  },
+  async mounted() {
+    // 基于准备好的dom，初始化echarts实例
+    var myChart = echarts.init(document.getElementById('main'));
+
+    const { data: res } = await this.$axios.get('reports/type/1');
+    if (res.meta.status !== 200) return this.$message.error('获取数据折线图失败');
+
+    const result = _.merge(this.options, res.data);
+    // 指定图表的配置项和数据
+    /*  var option = {
+       title: {
+         text: 'ECharts 入门示例'
+       },
+       tooltip: {},
+       legend: {
+         data: ['销量']
+       },
+       xAxis: {
+         data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+       },
+       yAxis: {},
+       series: [
+         {
+           name: '销量',
+           type: 'bar',
+           data: [5, 20, 36, 10, 10, 20]
+         }
+       ]
+     }; */
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(result);
+  }
+
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/router/index.js b/src/router/index.js
@@ -11,6 +11,7 @@ import Params from '@/components/goods/Params.vue'
 import GoodsList from '@/components/goods/GoodsList.vue'
 import AddGood from '@/components/goods/AddGood.vue'
 import Order from '@/components/orders/Order.vue'
+import Reports from '@/components/reports/Reports.vue'
 
 Vue.use(Router)
 
@@ -64,6 +65,10 @@ const router = new Router({
     {
       path: '/orders',
       component: Order,
+    },
+    {
+      path: '/reports',
+      component: Reports,
     }
     ]
   }]

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@ import Params from '@/components/goods/Params.vue'`
`11`	`11`	`import GoodsList from '@/components/goods/GoodsList.vue'`
`12`	`12`	`import AddGood from '@/components/goods/AddGood.vue'`
`13`	`13`	`import Order from '@/components/orders/Order.vue'`
	`14`	`+import Reports from '@/components/reports/Reports.vue'`
`14`	`15`
`15`	`16`	`Vue.use(Router)`
`16`	`17`
`@@ -64,6 +65,10 @@ const router = new Router({`
`64`	`65`	`{`
`65`	`66`	`path: '/orders',`
`66`	`67`	`component: Order,`
	`68`	`+ },`
	`69`	`+ {`
	`70`	`+ path: '/reports',`
	`71`	`+ component: Reports,`
`67`	`72`	`}`
`68`	`73`	`]`
`69`	`74`	`}]`