diff --git a/src/utils/comm.js b/src/utils/comm.js
new file mode 100644
index 0000000..6d5d98f
--- /dev/null
+++ b/src/utils/comm.js
@@ -0,0 +1,25 @@
+// 数字动态变化
+// 最后的几位数进行变化
+export function numGrow(obj,end){
+ var o = document.getElementById(obj);
+ // var i = start;
+ var i=0;
+ var Interval;
+ if (i < end) {
+ Interval = setInterval(function () {
+ i += 100; // 设置每次增加的动态数字，可调整
+ if (i > end) {
+ clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
+ o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
+ i = 0;
+ } else {
+ o.innerHTML = i.toLocaleString();
+ }
+ }, 1000); // 数据跳转的速度控制
+ }
+}
+
+// 计算eachrt的最大值
+export function ecMaxVal(arr){
+ return Math.max(arr)
+}
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 96039a1..7056631 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -15,7 +15,7 @@
-
{{ day_num }}
+
{{ day_num }}
今日进馆总人数
@@ -54,18 +54,18 @@
@@ -114,37 +114,6 @@
:class="[{ pcrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90 }, { pcrate3: parseInt(item.proportion) >= 90 }]">{{
item.proportion }}
-
-
-
@@ -155,6 +124,9 @@
import * as echarts from 'echarts';
import * as btApi from '../api/home'
+// 数字变化效果
+import { numGrow,ecMaxVal } from '@/utils/comm';
+
// 引入api
import * as homeApi from '@/api/home'
@@ -168,6 +140,18 @@ export default {
kltdata: [],
// 客流值数组
klvdata: [],
+ // 环图数据
+ kcdata:[],
+ // 环形的比例值
+ // tyc
+ tycra:[],
+ //tyg
+ tygra:[],
+ //yyg
+ yygra:[],
+ // bwg
+ bwgra:[],
+
day_num: 0,
week_num: 0,
mon_num: 0,
@@ -182,9 +166,13 @@ export default {
// });
// },
mounted() {
- this.showorders()
- this.cgrs_line()
- this.cgchart()
+ // 客流趋势
+ this.getDataIn()
+
+
+ // this.showorders()
+ // this.cgrs_line()
+ // this.cgchart()
this.getStat();
this.getHomeBarData();
@@ -197,15 +185,20 @@ export default {
methods: {
// 获取对应的参数
btgetdata(type) {
- console.log(type)
- let rqtp;
+ let nrq;
switch (type) {
- case 'd': rqtp = "daily"; break;
- case 'm': rqtp = "monthly"; break;
- case 'y': rqtp = "yearly"; break;
+ case 'd': nrq = "daily"; break;
+ case 'm': nrq = "monthly"; break;
+ case 'y': nrq = "yearly"; break;
}
+ return nrq;
+ },
+
+ // 获取不同时期的数据
+ getDataIn(){
+ const reqType = this.btgetdata(this.klselt);
//
- btApi.allGroupTimeNum({ 'granularity': rqtp }).then(res => {
+ btApi.allGroupTimeNum({ 'granularity': reqType }).then(res => {
const kldata = res.data.data.allTimeData
// 对应的键名
let kltd = new Array;
@@ -215,14 +208,48 @@ export default {
kltd.push(item)
tmpkvd.push(kldata[item].num)
})
+
+ // 赋值
this.kltdata = kltd
this.klvdata = tmpkvd
+ // 圆柱
+ this.showorders()
+ // 环图数据
+ const ccdata = res.data.data.groupsData
+ let tcdata =new Array;
+ ccdata.forEach(function(item,idx){
+ // idx
+ tcdata.push({
+ // value: item.proportion,
+ value: item.noRepeatInNum,
+ name: item.groupName
+ })
+ });
+ //
+ let tcidata = new Array;
+ ccdata.forEach(item=>{
+ // crcle infomation
+ tcidata.push({
+ name:item.groupName,
+ rate:item.proportion
+ });
+ });
+ // console.log(tcidata)
+ this.kcdata = tcdata
+ // 环形图
+ this.cgchart()
+ // this.kcrate = tcidata
+ this.tycra = tcidata[0]
+ this.tygra = tcidata[1]
+ this.yygra = tcidata[2]
+ this.bwgra = tcidata[3]
+
});
},
+
//选择年月日中的某个
selitem(type) {
this.klselt = type;
- this.btgetdata(type)
},
// 圆柱图
showorders() {
@@ -232,8 +259,10 @@ export default {
// 指定图表的配置项和数据
var option;
- var data = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120]
- // var data = this.klvdata
+ //var cdata = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120]
+ var cdata = this.klvdata
+ // y轴的最大值
+ var ytop = myChart.
// var data = [Math.random() * 300]
option = {
// backgroundColor: '#031245',
@@ -290,8 +319,7 @@ export default {
},
show: true,
},
- // data: this.kltdata,
- data: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '20:00', '21:00', '22:00'],
+ data: this.kltdata,
type: 'category',
},
yAxis: {
@@ -326,7 +354,7 @@ export default {
},
series: [
{
- data: data,
+ data: cdata,
type: 'bar',
barMaxWidth: 'auto',
barWidth: 15,
@@ -362,7 +390,7 @@ export default {
color: '#fff',
},
{
- data: data,
+ data: cdata,
type: 'pictorialBar',
barMaxWidth: '15',
symbolPosition: 'end',
@@ -371,8 +399,10 @@ export default {
symbolSize: [15, 7],
zlevel: 2,
},
+ // 背景柱子的数值
{
- data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
+ data: ecMaxVal(cdata),
+ //data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
type: 'bar',
barMaxWidth: 'auto',
barWidth: 15,
@@ -408,21 +438,6 @@ export default {
}
},
],
- tooltip: {
- show: "true",
- trigger: 'item',
- backgroundColor: 'rgba(0,0,0,0.7)', // 背景
- padding: [8, 10], //内边距
- textStyle: {
- color: '#fff'
- },
- extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
- formatter: function (params) {
- if (params.seriesName != "") {
- return params.name + ' : 有 ' + params.value + ' 人';
- }
- },
- },
};
@@ -466,14 +481,7 @@ export default {
labelLine: {
show: false
},
- data: [
- { value: 348, name: 'Search Engine' },
- { value: 335, name: 'Direct' },
- { value: 480, name: 'Email' },
- { value: 384, name: 'Union Ads' },
- { value: 600, name: 'Video Ads' },
- { value: 700, name: 'Video Adss' }
- ]
+ data: this.kcdata
}
]
};
@@ -632,15 +640,18 @@ export default {
getStat() {
let that = this
- console.log(that);
+ console.log("stat");
homeApi.allGroupNum().then(res => {
// get allTimeData
const tmpdata = res.data.returnData
console.log(tmpdata);
- this.day_num = tmpdata.day.noRepeatInNum
- this.week_num_num = tmpdata.week.noRepeatInNum
- this.mon_num = tmpdata.month.noRepeatInNum
- this.year_num = tmpdata.year.noRepeatInNum
+ that.day_num = tmpdata.day.noRepeatInNum
+ that.week_num = tmpdata.week.noRepeatInNum
+ that.mon_num = tmpdata.month.noRepeatInNum
+ that.year_num = tmpdata.year.noRepeatInNum
+
+ // 增加数字动画效果
+ numGrow(that.$refs.dynum,tmpdata.day.noRepeatInNum)
// let btdata = new Array();
// let bvdata = new Array();
- 12%
- 博物馆
+ {{bwgra.value}}
+ {{bwgra.name}}