黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-数据报表

目录

一.创建一个子分支

二.创建组件

三.绘制订单列表的页面基本结构

1.面包屑导航

2.卡片视图区

四.提交代码

---

一.创建一个子分支

git branch——查看当前所在分支

git checkout -b report——创建新的子分支report

git branch——查看当前所在分支

git push -u origin report——将子分支report推送到云端仓库中

二.创建组件

在components中创建report文件夹，在report文件夹中创建Report.vue组件

在router/index.js中导入Report.vue

三.绘制订单列表的页面基本结构

1.面包屑导航

2.卡片视图区

 

使用ECharts

（1）安装echarts依赖

 (2)导入echarts

 

(3)添加一个Dom

 

 （4）在mounted中初始化图表

 （5）准备数据和配置项

 （6）展示数据

 效果：

 发起数据请求

 

 

效果：

 美化：实现鼠标跟随效果

 1.在data中添加需要合并的数据

2.导入lodash

 3.准备数据和配置项

4.展示

将宽度变大一些

效果：

 

 

四.提交代码

git branch ——查看当前所处分支

git status——查看当前状态，此时为红色

git add .——添加到暂存区

git status——查看当前状态，此时变成绿色

git commit -m "完成了报表功能的开发"——提交到了本地仓库

git push——将本地的report分支推送到云端

git checkout master——切换到主分支

git merge report——主动合并report分支

git push——将本地的主分支推送到云端