vue后台管理系统——数据统计模块

电商后台管理系统的功能——数据统计模块

1. 数据统计概述

数据统计模块主要用于统计电商平台运营过程的中的各种统计数据，并通过直观的可视化方式展示出来，方便相关运营和管理人员查看。

2. 用户来源数据统计报表

在component目录下新建report目录，再建Report.vue组件

① Echarts 第三方可视化库的基本使用

// 安装echarts库
npm install echarts -S

也可以通过vue ui图形化界面来安装第三方插件：

第一步，导入echarts：

// 导入echarts接口
import echarts from 'echarts'

第二步，在页面上放置一个图标区域：

第三步，调用init函数，将上面的div初始化为echarts实例：

如果把代码粘到created里面肯定会报错，因为我们初始化图表应该在页面上的DOM元素被渲染完毕之后才能够进行初始化。而mounted函数就是在页面上的DOM元素加载完成之后才会执行：

② 实现用户来源数据统计报表

调用接口获取后台接口数据
通过echarts的api实现报表效果

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(this.$refs.main)
const { data: res } = await this.$http.get('reports/type/1')
if (res.meta.status !== 200) return this.$message.error('初始化折线图失败！ ')
const data = _.merge(res.data, this.options)
// 绘制图表
myChart.setOption(data)