【Vue】實戰項目:電商後台管理系統(八)數據統計模塊

語言: CN / TW / HK

theme: vue-pro highlight: a11y-dark


嗨!~ 大家好,我是YK菌 🐷 ,一個微系前端 ✨,愛思考,愛總結,愛記錄,愛分享 🏹,歡迎關注我呀 😘 ~ [微信號: yk2012yk2012,微信公眾號:ykyk2012]

「這是我參與11月更文挑戰的第13天,活動詳情查看:2021最後一次更文挑戰

項目地址:https://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

項目地址:https://gitee.com/ykang2020/vue_shop

最後,歡迎關注我的專欄,和YK菌做好朋友

「其他文章」