黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-数据报表
2022-08-03 09:57:03
207
{{single.collect_count}}

目录

一.创建一个子分支

二.创建组件

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

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——将本地的主分支推送到云端

回帖
全部回帖({{commentCount}})
{{item.user.nickname}} {{item.user.group_title}} {{item.friend_time}}
{{item.content}}
{{item.comment_content_show ? '取消' : '回复'}} 删除
回帖
{{reply.user.nickname}} {{reply.user.group_title}} {{reply.friend_time}}
{{reply.content}}
{{reply.comment_content_show ? '取消' : '回复'}} 删除
回帖
收起
没有更多啦~
{{commentLoading ? '加载中...' : '查看更多评论'}}