[Vue.js]实战 -- 电商项目(八)

数据统计

数据统计概述

用于统计电商平台运营过程的中的各种统计数据

通过直观的可视化方式展示出来，方便相关运营和管理人员查看

 

用户来源数据统计报表

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

• 安装echarts库

// 安装echarts库
 npm install echarts -S

• 导入echarts接口

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

 

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

• 调用接口获取后台接口数据

• 通过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)