From 36dbe835ed7acbd7f66e6c4bad596441488bb3bd Mon Sep 17 00:00:00 2001 From: "453530270@qq.com" Date: Wed, 26 Jul 2023 11:03:48 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=80=9A=E7=94=A8?= =?UTF-8?q?=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/comm.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/utils/comm.js 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 From 1d0873d995dc0fc6905af1e97eb29b2b32ce5924 Mon Sep 17 00:00:00 2001 From: "453530270@qq.com" Date: Wed, 26 Jul 2023 11:04:09 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E7=9A=84=E6=95=B0=E6=8D=AE=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/HomeView.vue | 181 ++++++++++++++++++++++------------------- 1 file changed, 96 insertions(+), 85 deletions(-) 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 @@
  • - 体育场 - 20% + {{ tycra.name }} + {{ tycra.value }}
  • - 体育馆 - 12% + {{tygra.name}} + {{ tygra.value }}
  • - 游泳场馆 - 12% + {{yygra.name}} + {{ yygra.value }}
@@ -87,8 +87,8 @@
  • - 12% - 博物馆 + {{bwgra.value}} + {{bwgra.name}}
    • @@ -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();