---

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菌做好朋友