【Vue】實戰項目:電商後台管理系統(八)數據統計模塊
theme: vue-pro highlight: a11y-dark
嗨!~ 大家好,我是YK菌 🐷 ,一個微系前端 ✨,愛思考,愛總結,愛記錄,愛分享 🏹,歡迎關注我呀 😘 ~ [微信號:
yk2012yk2012
,微信公眾號:ykyk2012
]
「這是我參與11月更文挑戰的第13天,活動詳情查看:2021最後一次更文挑戰」
項目地址:http://gitee.com/ykang2020/vue_shop
今天繼續用Vue和Element做後台管理系統的項目,這次實現最後一個模塊——數據統計模塊
1. 分支git操作
powershell
git checkout -b report
git push -u origin report
2. 掛載Report組件及基本佈局
和之前的步驟一樣,先把主體框架搭好
```html
```
3. 安裝echarts
運行依賴並渲染demo
圖表
這裏我們使用echarts來展示圖表
http://echarts.apache.org/zh/index.html
```html
```
可以看到效果【這是入門demo實例】
4. 獲取數據並渲染表格
接下來我們就要渲染自己的數據為圖表了
首先拿到接口文檔
```html
```
5. 展示
最後來看我們數據可視化的效果
6. 分支git操作
powershell
git add .
git commit -m "完成報表功能"
git push
git checkout master
git merge report
git push
項目地址:http://gitee.com/ykang2020/vue_shop
最後,歡迎關注我的專欄,和YK菌做好朋友
「其他文章」
- 【TS】快速上手(四)配置選項 - 編譯選項compilerOptions
- 【LeetCode】圖解反轉鏈表 - 迭代 - 遞歸
- 【LeetCode】最大子序和從O(N^3)到O(N) - 暴力初探 - 分而治之 - 在線處理
- 【JS】JavaScript基礎知識自我檢查大過關(第三關)函數定義與調用
- 【Vue】高級系列(六)Vue-cli配置代理 -demo3-GitHub用户查詢-axios
- 【Vue】高級系列(五)組件間通信
- 【Vue】高級系列(四)Vue模塊化實戰-demo2-任務清單todoList
- 【TS】快速上手(二)類型聲明
- 【Vue】高級系列(三)Vue模塊化實戰-demo1-動態評價頁面
- 【Vue】高級系列(二)Vue相關小知識
- 【Vue】高級系列(一)Vue組件定義與使用 - 非單文件組件 - 單文件組件 - VueComponent
- 【Vue】基礎系列(十一)Vue指令-常用內置指令-自定義指令-全局指令-局部指令
- 【Vue】基礎系列(九)動畫與過渡-trasition-enter-leave
- 【Vue】基礎系列(八)生命週期 - 初始化顯示 - 更新狀態 - 死亡狀態 - 父子組件
- 【Vue】基礎系列(七)v-model - 自動收集數據 - 表單數據自動更新
- 【Vue】基礎系列(六)事件處理 - 綁定監聽 - 事件修飾符 - 按鍵修飾符
- 【Vue】基礎系列(四)樣式綁定 - class - style
- 【Vue】基礎系列(二)模板語法 - 插值語法 - 指令語法 - | v-bind | v-model | v-on | v-if | v- show
- 【Vue】實戰項目:電商後台管理系統(九)項目優化 上線
- 【Vue】實戰項目:電商後台管理系統(八)數據統計模塊