電商后台管理系統的功能——數據統計模塊
1. 數據統計概述
數據統計模塊主要用於統計電商平台運營過程的中的各種統計數據，並通過直觀的可視化方式展示出來，方便相關運營和管理人員查看。
2. 用戶來源數據統計報表
在component目錄下新建report目錄，再建Report.vue組件
① Echarts 第三方可視化庫的基本使用
// 安裝echarts庫 npm install echarts -S
也可以通過vue ui圖形化界面來安裝第三方插件：
第一步，導入echarts：
// 導入echarts接口 import echarts from 'echarts'
第二步，在頁面上放置一個圖標區域：
第三步，調用init函數，將上面的div初始化為echarts實例：
如果把代碼粘到created里面肯定會報錯，因為我們初始化圖表應該在頁面上的DOM元素被渲染完畢之后才能夠進行初始化。而mounted函數就是在頁面上的DOM元素加載完成之后才會執行：
② 實現用戶來源數據統計報表
- 調用接口獲取后台接口數據
- 通過echarts的api實現報表效果
// 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(this.$refs.main) const { data: res } = await this.$http.get('reports/type/1') if (res.meta.status !== 200) return this.$message.error('初始化折線圖失敗！ ') const data = _.merge(res.data, this.options) // 繪制圖表 myChart.setOption(data)
官方直接將后台獲取的數據綁定到echarts上是有些問題的，並沒有鼠標跟隨的效果，這是因為服務器返回的折線圖數據是不完整的，如果想要實現鼠標跟隨的效果，還需要將后台獲取的數據與接口文檔中提供的options進行合並，得到一個新對象，最終將合並的結果賦值給echarts：
如何將兩個對象的數據為一個新對象呢？這就需要使用lodash（之前是使用lodash進行深拷貝）
3. 將數據統計功能上傳到碼雲
- 使用git checkout -b report創建一個新分支並切換到該分支上
- 使用git branch查看當前所處的分支，所有代碼的修改也一起被切換到了report子分支中
- 使用git status命令檢查當前分支的代碼狀態
- 使用git add .命令統一增加到暫存區
- 使用git commit -m "完成數據統計功能的開發"命令把report分支提交到本地倉庫中
本地report的代碼就是最新的了
使用git push -u origin report命令把本地的report分支推送到雲端中
master是主分支，但是它的代碼還是舊的，應該立即把所有的代碼合並到主分支上
- 使用git checkout master命令切換到主分支
- 使用git merge order命令從主分支上把report分支上的代碼合並過來
- 使用git push命令將本地的master分支的代碼推送到雲端，這樣master分支上的代碼也是最新的了
代碼地址：https://github.com/Emliy-zcy/Backstage-Management-System-Based-on-vue