---

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