Vue + ElementUI的電商管理系統實例16 數據報表

1、創建數據報表分支report並push到遠程

創建分支：

git checkout -b report

推送到遠程：（以前碼雲中沒有該分支，所以要加-u，如果碼雲中有該分支，則不需要加-u）

git push -u origin report

2、通過路由加載數據報表組件

新建report文件夾和Report.vue文件：

<template>
<div>報表組件</div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>

</style>

添加路由：

import Report from '../components/report/Report.vue'

const routes = [
  { path: '/', redirect: '/login' }, // 重定向
  { path: '/login', component: Login },
  {
    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: List }, // 商品列表
      { path: '/goods/add', component: Add }, // 添加商品
      { path: '/orders', component: Order }, // 訂單列表
      { path: '/reports', component: Report } // 數據報表
    ]
  }
]

點擊左側菜單的商品分類的效果如圖：

3、繪制數據報表組件的基本布局

還是面包屑和card視圖：

<template>
<div>
  <!--面包屑導航區域-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首頁</el-breadcrumb-item>
      <el-breadcrumb-item>數據統計</el-breadcrumb-item>
      <el-breadcrumb-item>數據報表</el-breadcrumb-item>
  </el-breadcrumb>
  <!--卡片視圖區域-->
  <el-card>
    11
  </el-card>
</div>
</template>

4、安裝Echarts並渲染Demo圖表

打開可視化工具，點擊項目依賴--添加依賴--運行依賴 中搜索：echarts，然后進行安裝。

回到Report.vue文件，導入echarts：

import echarts from 'echarts'

然后添加 echarts 區域：

<!--卡片視圖區域-->
<el-card>
    <!-- 2.為ECharts准備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
</el-card>

<script>
// 1.導入 echarts
import echarts from 'echarts'
export default {
  // 此時頁面上的元素，已經被渲染完畢
  mounted() {
    // 3.基於准備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'))

    // 4.指定圖表的配置項和數據
    var option = {
      title: {
        text: 'ECharts 入門示例'
      },
      tooltip: {},
      legend: {
        data: ['銷量']
      },
      xAxis: {
        data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
      },
      yAxis: {},
      series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    }

    // 5.使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option)
  }
}
</script>

此時刷新頁面：

5、獲取折線圖數據並渲染圖表

發起請求，調用api的基於時間統計的折線圖接口，請求路徑：reports/type/1，請求方法：get，不需要傳遞參數。

// 此時頁面上的元素，已經被渲染完畢
  async mounted() {
    // 3.基於准備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'))

    const { data: res } = await this.$http.get('reports/type/1')
    if (res.meta.status !== 200) {
      return this.$message.error('獲取折線圖數據失敗')
    }
    console.log(res)

    // 4.指定圖表的配置項和數據
    // var option = {
    //   title: {
    //     text: 'ECharts 入門示例'
    //   },
    //   tooltip: {},
    //   legend: {
    //     data: ['銷量']
    //   },
    //   xAxis: {
    //     data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
    //   },
    //   yAxis: {},
    //   series: [{
    //     name: '銷量',
    //     type: 'bar',
    //     data: [5, 20, 36, 10, 10, 20]
    //   }]
    // }

    // 5.使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(res.data)
  }

此時刷新可以看到效果圖：

但是缺少了鼠標跟隨的效果，下面進行添加。

需要將返回的數據和 option 進行合並，然后把合並后的結果給圖表

import _ from 'lodash'
export default {
  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() {
    、、、
    // 4.指定圖表的配置項和數據
    // merge 函數，可以合並兩個對象
    const result = _.merge(res.data, this.options)

    // 5.使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(result)
  }
}
</script>

如果覺得圖表比較小，可以調整寬和高：

<!-- 2.為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 750px;height:400px;"></div>

此時效果圖：

可以提交代碼了：

git add .
git commit -m "完成了報表功能的開發"
git push

git checkout master
git merge report
git push