數據報表
效果展示:
在開發代碼之前新建分支
git checkout -b report
新建分支report
git branch
查看分支
git push -u origin report
將本地report分支推送到云端origin并命名為report
通過路由的形式將數據報表加載到頁面中
渲染數據報表基本布局
面包屑導航+卡片視圖區域
基于ECharts在頁面上繪制圖形區
命令行安裝echarts,–save參數是用來確保將echarts包添加到項目的package.json文件的dependencies列表中。
npm install echarts --save
生命周期函數:
beforeMount(): 模板編譯/掛載之前被調用,$el 屬性仍然不可見。當模板(template)渲染到頁面之前會執行。
mounted(): 實例掛載到DOM上之后被調用,這時候可以進行DOM相關的操作。當模板(template)渲染到頁面完畢會執行。
注意需要在DOM元素渲染完畢后才能渲染圖表,故使用mounted()生命周期函數
獲取報表數據并將數據替換到圖表中進行展示
發起get請求獲取折線圖的數據
獲取到的數據直接進行圖表展示會缺少鼠標跟隨的效果,需要將文檔中提供的options對象與之前獲取到的對象進行合并(用lodash中merge函數)
將合并的結果交給圖表進行展示
提交數據報表代碼到云端
cls
清屏
git status
查看當前文件的狀態
git branch
查看當前分支
git add .
將所有修改的文件添加到暫存區
git commit -m "完成了報表功能的開發"
本地提交代碼
git push
本地當前分支代碼提交到云端
git checkout master
切換到主分支master
git merge report
合并report分支到master中
git push
本地master代碼推送到云端