Vue+ElementUI电商项目（七）

数据统计

创建数据统计路由组件并添加路由规则

<template>
  <div>
    <Breadcrumb :item="item" :subItem="subItem"></Breadcrumb>
    <Echarts></Echarts>
  </div>
</template>

<script>
  import Breadcrumb from '../../components/Breadcrumb.vue'
  import Echarts from '../../components/Echarts.vue'
  export default {
    data() {
      return {
        item: '数据统计',
        subItem: '数据报表'
      }
    },
    components: {
        Breadcrumb,
        Echarts
    }
  }
</script>

<style>
</style>

打开router.js，导入Report.vue并设置路由规则

import Report from './components/report/Report.vue'
path: '/home', component: Home, redirect: '/welcome', children: [
  { path: "/welcome", component: Welcome },
  { path: "/users", component: Users },
  { path: "/rights", component: Rights },
  { path: "/roles", component: Roles  },
  { path: "/categories", component: Cate  },
  { path: "/params", component: Params  },
  { path: "/goods", component: GoodList  },
  { path: "/goods/add", component: GoodAdd  },
  { path: "/orders", component: Order  },
  { path: "/reports", component: Report  }
]

导入ECharts并使用

npm install echarts --save

<template>
  <div class="main">
    <div id="echarts" style="height: 500px;"></div>
  </div>
</template>

<script>
  // 导入echarts
  import * as echarts from 'echarts'
  // 导入lodash
  import _ from 'lodash'
  import { getReports } from '../api/reports.js'
  export default {
    data() {
      return {
        // 需要跟请求的折线图数据合并的options
        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'
            }
          ]
        }
      }
    },
    mounted() {
      // 在页面dom元素加载完毕之后执行的钩子函数mounted
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts'))
      // 准备数据和配置项
      // 发送请求获取折线图数据
      getReports().then(res => {
        const data = res.data
        if (data.meta.status !== 200) {
          return this.$message.error(data.meta.msg)
        }
        // 合并res.data和this.options
        const result = _.merge(data.data, this.options)
        console.log(data.data)
        // 使用获取的数据展示图表
        myChart.setOption(result)
      })
    }
  }
</script>

<style lang="scss" scoped>
</style>

完善首页

在element.js中添加calendar（日历）

<template>
  <div>
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :md="14">
        <Echarts></Echarts>
      </el-col>
      <el-col :xs="24" :sm="24" :md="10">
        <el-calendar v-model="now"></el-calendar>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import Echarts from '../components/Echarts.vue'
  export default {
    data() {
      return {
        now: new Date()
      }
    },
    components: {
        Echarts
    }
  }
</script>
<style></style>