Vue 数据统计模块(折线+饼图) |
您所在的位置：网站首页 › 停车场数据统计图怎样做 › Vue 数据统计模块(折线+饼图) |
Vue 数据统计模块(折线+饼图)
|
1. 数据统计的页面布局
首页
欢迎页
用户统计
实时
7
当前总用户数量
商品统计
实时
7
当前总商品数量
订单统计
实时
7
当前总订单数量
销售统计
实时
7
当前总销售(元)
export default {}
.el-row{
padding: 0 9px;
.statistics{
color: white;
height: 100px;
border-radius:4px;
padding: 0 8px;
.title{
display: flex; // 弹性布局
justify-content: space-between; // 两边对齐
align-items: center; // 垂直居中
}
p{
font-size: 13px;
font-weight: bold;
}
.num{
font-size: 20px;
font-weight: bold;
text-align: center;
}
.tip{
font-size: 12px;
}
}
}
2.数据统计
这里需要用到echarts cnpm install echarts -S创建显示图表的区域 导入echarts import echarts from 'echarts' async getOrderList() { const { data: res } = await this.$http.get('orders') if (res.meta.status !== 200) { return this.$message.error('获取订单数据失败') } this.totalOrders = res.data.total // 计算总销售额 this.orderList = res.data.goods this.orderList.forEach((item) => { if (item.pay_status === '1') { this.totalSales += item.order_price } }) // 展示图表 this.initChart1() }, initChart1() { // 创建echarts实例 获取要展示的区域 var chart1 = echarts.init(document.getElementById('chart1')) // 订单趋势 var option = { title: { text: '订单趋势', }, tooltip: { trigger: 'axis', axisPointer: { type: 'line', }, }, xAxis: { type: 'category', data: [], }, yAxis: { type: 'value', }, series: [ { type: 'line', smooth: true, data: [] }, ], } // 根据时间进行排序 this.orderList.sort(function(a,b){ return a.create_time - b.create_time }) // 时间作为key 金额作为value let data = [] this.orderList.forEach(item=>{ if(item.pay_status==="1"){ // 将时间进行转换 let key = this.$utils.formatToDate(item.create_time) // 将同一天下的订单金额加起来 if(!data[key]){ // 如果数组中没有那么直接将时间和金额对应添加进既可以 data[key] = item.order_price }else{ // 如果数组中已经存在该日期我们将金额累加即可(这一天订单在一单以上) data[key] += item.order_price } } }) // 将数据添加到options中 for(var key in data){ option.xAxis.data.push(key) option.series[0].data.push(data[key]) } chart1.setOption(option) }, 4.饼状图展示订单状态
在登录的时候和后端交互需要一定的时间,可以用进度条动画表示 安装第三方依赖 npm install --save nprogressmain.js中全局引入 完整代码 首页 欢迎页 用户统计 实时 {{ totalUsers }} 当前总用户数量 商品统计 实时 {{ totalGoods }} 当前总商品数量 订单统计 实时 {{ totalOrders }} 当前总订单数量 销售统计 实时 {{ totalSales }} 当前总销售(元) import echarts from 'echarts' export default { data() { return { totalUsers: 0, totalGoods: 0, totalOrders: 0, totalSales: 0, // 订单数据 orderList: [], } }, created() { this.getUserList() this.getGoodsrList() this.getOrderList() }, methods: { async getUserList() { const { data: res } = await this.$http.get('users', { params: { pagenum: 1, pagesize: 1, }, }) if (res.meta.status !== 200) { return this.$message.error('获取用户数据失败') } this.totalUsers = res.data.total }, async getGoodsrList() { const { data: res } = await this.$http.get('goods', { params: { pagenum: 1, pagesize: 1, }, }) if (res.meta.status !== 200) { return this.$message.error('获取商品数据失败') } this.totalGoods = res.data.total }, async getOrderList() { const { data: res } = await this.$http.get('orders') if (res.meta.status !== 200) { return this.$message.error('获取订单数据失败') } this.totalOrders = res.data.total // 计算总销售额 this.orderList = res.data.goods this.orderList.forEach((item) => { if (item.pay_status === '1') { this.totalSales += item.order_price } }) // 展示图表 this.initChart1() this.initChart2() }, initChart1() { // 创建echarts实例 获取要展示的区域 var chart1 = echarts.init(document.getElementById('chart1')) // 订单趋势 var option = { title: { text: '订单趋势', }, tooltip: { trigger: 'axis', axisPointer: { type: 'line', }, }, xAxis: { type: 'category', data: [], }, yAxis: { type: 'value', }, series: [ { type: 'line', smooth: true, data: [], }, ], } // 根据时间进行排序 this.orderList.sort(function (a, b) { return a.create_time - b.create_time }) // 时间作为key 金额作为value let data = [] this.orderList.forEach((item) => { if (item.pay_status === '1') { // 将时间进行转换 let key = this.$utils.formatToDate(item.create_time) // 将同一天下的订单金额加起来 if (!data[key]) { // 如果数组中没有那么直接将时间和金额对应添加进既可以 data[key] = item.order_price } else { // 如果数组中已经存在该日期我们将金额累加即可(这一天订单在一单以上) data[key] += item.order_price } } }) // 将数据添加到options中 for (var key in data) { option.xAxis.data.push(key) option.series[0].data.push(data[key]) } chart1.setOption(option) }, initChart2() { var chart2 = echarts.init(document.getElementById('chart2')) // 订单状态 var option = { title: { text: '订单状态', }, tooltip: { trigger: 'item', formatter: '{b} : {c} ({d}%)', }, legend: { orient: 'vertical', left: 'right', data: [], }, series: [ { name: '订单状态', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], // data: [], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)', }, }, }, ], } // 对数据进行处理 var data = [ { name:'已付款', value:0 }, { name:'未付款', value:0 } ] this.orderList.forEach(item=>{ if(item.pay_status==='1'){ data[0].value++ }else{ data[1].value++ } }) for(var item of data){ option.legend.data.push(item.name) option.series[0].data.push(item) } chart2.setOption(option) }, }, } .el-row { padding: 0 9px; .statistics { color: white; height: 100px; border-radius: 4px; padding: 0 8px; .title { display: flex; // 弹性布局 justify-content: space-between; // 两边对齐 align-items: center; // 垂直居中 } p { font-size: 13px; font-weight: bold; } .num { font-size: 20px; font-weight: bold; text-align: center; } .tip { font-size: 12px; } } } .echarts-container { display: flex; // 同一行显示 justify-content: space-between; margin-top: 10px; .el-card { height: 400px; width: 50%; margin: 0 8px; // 左右0 上下8 padding: 20px; // 内边距 } } |
【本文地址】