11.1Vue电商后台管理系统 完善数据报表 ：新增了报表--页面访问量

1. 效果如下：

新增的报表是：页面访问量（至于为什么，是根据后台的代码+自己的推测得到的，如果之后有更多时间，会在另一篇文章中做具体解释，本文会直接告诉实现方法和代码）。

2. 实现步骤

1. 修改后端

1。先修改后端，打开后端代码的文件夹，找到 services/ReportServices.js:

2。 找到 function reportTwo（cb） ，reportOne是视频中老师教的图表，而reportTwo是我加上的页面访问量这一报表：

对reportTwo函数增加代码，完整代码如下：

function reportTwo(cb) {dao.list("ReportTwoModel",null,function(err,result){if(err) return cb("获取报表数据失败");var dateKeyResult = {};// 页数var pageKey = _.union(_.map(result,"rp2_page"));// 时间var dateKeys = _.union(_.map(result,function(record){str = record["rp2_date"].getFullYear() + "-" + (record["rp2_date"].getMonth() + 1) + "-" + record["rp2_date"].getDate()return str;}));for(var idx in result) {var record = result[idx];var dateKey = record["rp2_date"].getFullYear() + "-" + (record["rp2_date"].getMonth() + 1) + "-" + record["rp2_date"].getDate();if(!dateKeyResult[record["rp2_page"]]) {dateKeyResult[record["rp2_page"]] = {};}dateKeyResult[record["rp2_page"]][dateKey] = record;}// 格式输出var series = [];_(pageKey).forEach(function(pageKey){var data = []_(dateKeys).forEach(function(dateKey){if(dateKeyResult[pageKey][dateKey]) {data.push(dateKeyResult[pageKey][dateKey]["rp2_count"]);} else {data.push(0);}})series.push({name:pageKey,type:'line',stack: '总量',areaStyle: {normal: {}},data:data})});data = {legend: {// 这个data是指 每一个页面data : pageKey},yAxis : [{type : 'value'}],xAxis : [{data :dateKeys}],series : series};cb(null,data);});
}

2. 修改前端

刚刚修改了后端代码，之后要修改前端代码。

ps：我没有额外加一个页面来呈现新的报表，而是仍然在report.vue中进行修改，只是用了tab组件来对两个报表进行切换。

1。 找到 src/components/report/Report.vue ：

2。 布局代码如下（添加了tab组件，且增加了页面访问量这一报表的布局，id为main2）：

布局代码增加如下：

 <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick"><el-tab-pane label="用户来源" name="0"><div id="main1" style="width: 1100px;height:450px;">div>el-tab-pane><el-tab-pane label="页面访问量" name="1"><div id="main2" style="width: 1100px;height:450px;">div>el-tab-pane>el-tabs>

3。 仍然是在report.vue中修改代码，script标签中的代码修改如下,加入变量和函数：


修改代码如下：

 // 2.此时页面上的元素已经被渲染完毕了mounted () {this.userOrigin()this.handleClick()},methods: {handleClick (tab, event) {// console.log(tab.index)// tab.index 表示当前标签页为多少，这是一个字符串类型if (tab.index === '0') {// 发起访问第一个数据报表的请求this.userOrigin()} else if (tab.index === '1') {this.pageAccess()}},// 用户来源async userOrigin () {// 3.基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main1'))// // 发起数据请求，获取折线图数据const { data: res } = await this.$http.get('reports/type/1')if (res.meta.status !== 200) {return this.$message.error('获取折线图失败!')}// 4.指定图表的配置项和数据const result = _.merge(res.data, this.options)// 5. 展示数据myChart.setOption(result)},// 页面访问量async pageAccess () {// 3.基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main2'))// // 发起数据请求，获取折线图数据const { data: res } = await this.$http.get('reports/type/2')if (res.meta.status !== 200) {return this.$message.error('获取折线图失败!')}// 4.指定图表的配置项和数据const result = _.merge(res.data, this.options)// 5. 展示数据myChart.setOption(result)}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！