【Vue】实战项⽬：电商后台管理系统（Element-UI）（⼋）数据统计模块⽂章⽬录
1. 分⽀git操作
git checkout -b report
git push -u origin report
2. 挂载Report组件及基本布局
<template>
<div>
<!-- ⾯包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">⾸页</el-breadcrumb-item>
<el-breadcrumb-item>数据统计</el-breadcrumb-item>
<el-breadcrumb-item>数据报表</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default{}
</script>
<style scoped></style>
3. 安装echarts运⾏依赖并渲染demo图表
<template>
<div>
<!-- ⾯包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">⾸页</el-breadcrumb-item> <el-breadcrumb-item>数据统计</el-breadcrumb-item>
<el-breadcrumb-item>数据报表</el-breadcrumb-item>
</el-breadcrumb>
<el-card>
<!-- 为 ECharts 准备⼀个具备⼤⼩（宽⾼）的 DOM -->
<div id="main" ></div>
</el-card>
</div>
</template>
<script>
import*as echarts from'echarts'
export default{
// 此时页⾯上的元素已经渲染完毕了
mounted(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.ElementById('main'))
// 指定图表的配置项和数据
var option ={
title:{
text:'ECharts ⼊门⽰例'
},
tooltip:{},
legend:{
data:['销量']
},
xAxis:{
data:['衬衫','⽺⽑衫','雪纺衫','裤⼦','⾼跟鞋','袜⼦']
},
yAxis:{},
series:[
{
name:'销量',
type:'bar',
data:[5,20,36,10,10,20]
}
]
}
// 使⽤刚指定的配置项和数据显⽰图表。
myChart.setOption(option)
},
}
</script>
4. 获取数据并渲染表格
<template>
<div>
<!-- ⾯包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">⾸页</el-breadcrumb-item> <el-breadcrumb-item>数据统计</el-breadcrumb-item>
<el-breadcrumb-item>数据报表</el-breadcrumb-item>
</el-breadcrumb>
<el-card>
<!-- 为 ECharts 准备⼀个具备⼤⼩（宽⾼）的 DOM -->
<div id="main" ></div>
</el-card>
</div>
</template>
<script>
import*as echarts from'echarts'
import _ from'lodash'
export default{
data(){
return{
// 需要合并的数据
options:{
title:{
text:'⽤户来源'
},
tooltip:{
trigger:'axis',
axisPointer:{
type:'cross',
label:{
backgroundColor:'#E9EEF3'
}
},
grid:{
left:'3%',
right:'4%',
bottom:'3%',
containLabel:true
},
xAxis:[
{
boundaryGap:false
}
],
yAxis:[
{
type:'value'
}
]
}
}
},
created(){},
// 此时页⾯上的元素已经渲染完毕了
async mounted(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.ElementById('main')) // 获取数据
const{ data: result }=await this.$('reports/type/1')
a.status !==200){
return this.$('获取折线图数据失败！')
}
// 准备数据和配置项
const res = _.merge(result.data,this.options)
// 使⽤刚指定的配置项和数据显⽰图表。
myChart.setOption(res)
},
methods:{}
}
</script>
<style scoped></style>
5. 展⽰
vue element admin6. 分⽀git操作
git commit -m "完成报表功能" git push
git checkout master
git merge report
git push