-
体育
- 体育场 |
+ 体育
+ STADIUM
+ 体育场 |
体育馆 | 游泳场馆
- 总计进馆人数
+ 累计服务人数
- {{todayNum}}
- 今日进馆人数
+
+
+
- {{monthNum}}
- 本月进馆人数
+
- {{ yearNum }}
- 本年进馆人数
+
- {{todayNum}}
- 今日进馆人数
+
+ {{todayNum}}
+ 今日进馆人数
+
+
+
+
+
+ {{weekNum}}
+ 本周进馆人数
+
- {{monthNum}}
- 本月进馆人数
+
+ {{monthNum}}
+ 本月进馆人数
+
- {{ yearNum }}
- 本年进馆人数
+
+ {{ yearNum }}
+ 本年进馆人数
+
- 24小时总进馆人流趋势
+ 24小时总服务人次趋势
-
+
+
24小时进馆人数
+
+
+ 21312
+ 体育场
+ 21312
+ 体育馆
+ 21312
+ 游泳场馆
+
-
+
- 各场馆人次占比
-
+
-
+
@@ -153,10 +182,12 @@ export default {
istygShow3: false,
// 体育馆、体育场、游泳馆进场人数总计
todayNum:0,
+ weekNum: 0,
monthNum:0,
yearNum:0,
// 一天的数据
daData:[],
+ data24h: [],
// 场馆人次占比
cgp_1:'',
cgp_2:'',
@@ -172,7 +203,8 @@ export default {
oWebControl0: '',
oWebControl1: '',
oWebControl2: '',
- videoData: []
+ videoData: [],
+ rightTab: 1
};
},
@@ -189,11 +221,13 @@ export default {
mounted() {
let cc = window.document.getElementById("app");
// 清除其他多余的classname
- if (cc.className.indexOf('ty_bg') > -1) {
- cc.className = "btgym";
- } else {
- cc.classList.add("ty_bg");
- }
+ setTimeout(() => {
+ if (cc.className.indexOf("ty_bg") > -1) {
+ cc.className = "btgym";
+ } else {
+ cc.classList.add("ty_bg");
+ }
+ }, 200);
// // 计算三个馆的进馆人数
this.$nextTick( ()=>{
this.getStat()
@@ -204,7 +238,8 @@ export default {
this.ty_bar1()
// this.ty_bar2()
this.ty_bar3()
- })
+ this.ty_pie1()
+ })
// this.$nextTick(()=>{
@@ -252,11 +287,22 @@ export default {
},
ty_bar1() {
- var myChart = echarts.init(this.$refs.dinschart);
-
- var xData = ['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'];
-
- var data = [10000, 20000, 10000, 20000, 10000, 20000, 25000, 50000, 30000, 13000, 15000, 11000, 12000]
+ let that = this;
+ var xData = ['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'];
+ // console.log(that.daData.dkeys, 'that.daData.dkeys')
+ var data24h = [10000, 20000, 10000, 20000, 10000, 20000, 25000, 50000, 30000, 13000, 15000, 11000, 12000, 10000];
+ // data24h = that.data24h;
+ let max=data24h[0];
+ for (let i = 0; i < data24h.length; i++) {
+ if (data24h[i]>max) {
+ max = data24h[i];
+ }
+ }
+ let dataLenArr = [], dataBGArr = [];
+ data24h.map(item=>{
+ dataLenArr.push(0);// 获取和数据一样长度的圆点图形数组
+ dataBGArr.push(max);// 数组最大值做背景柱形
+ })
var option = {
tooltip: {
@@ -274,6 +320,7 @@ export default {
containLabel: true
},
xAxis: [{
+ // data: that.daData.dkeys,
data: xData,
axisLine: {
lineStyle: {
@@ -339,7 +386,7 @@ export default {
)
}
},
- data: data,
+ data: data24h,
zlevel: 11
},
{
@@ -347,7 +394,7 @@ export default {
stack: 1,
xAxisIndex: 0,
symbolOffset: [0, 0], //相对于原本位置的偏移量
- data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
+ data: dataLenArr,
itemStyle: {
normal: {
color: '#fff'
@@ -362,7 +409,7 @@ export default {
type: 'bar',
barWidth: '10%',
barGap: '-100%',
- data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
+ data: dataBGArr,
itemStyle: {
normal: {
color: '#004298',
@@ -376,13 +423,55 @@ export default {
]
}
-
- option && myChart.setOption(option);
+ function run(myChart){
+ that.getStat();
+ // console.log('乱序重新绘制', that.daData.dkeys, that.data24h, data24h);
+ data24h = data24h.sort(function(a,b){
+ return Math.random() - 0.5;
+ });
+ let max=data24h[0];
+ for (let i = 0; i < data24h.length; i++) {
+ if (data24h[i]>max) {
+ max = data24h[i];
+ }
+ }
+ let dataLenArr = [], dataBGArr = [];
+ data24h.map(item=>{
+ dataLenArr.push(0);// 获取和数据一样长度的底部图形数组；
+ dataBGArr.push(max);// 数组最大值做背景柱形
+ })
+ myChart.setOption({
+ xAxis: {
+ data: that.daData.dkeys
+ },
+ series: [{
+ type: 'bar',
+ data: data24h,
+ },
+ {
+ type: 'scatter',
+ data: dataLenArr
+ },
+ {
+ name: '背景',
+ type: 'bar',
+ data: dataBGArr
+ },
+ ]
+ });
+ }
+ // 加延时器使图像绘制获取元素宽高最新的值
+ setTimeout(()=>{
+ var myChart = echarts.init(this.$refs.dinschart);
+ option && myChart.setOption(option);
+ setInterval(function () {
+ run(myChart);
+ }, 3000);
+ }, 200)
},
ty_bar2() {
var chartDom = document.getElementById("pcgchart1");
- var myChart = echarts.init(chartDom);
var option
// var xData = function() {
@@ -547,11 +636,13 @@ export default {
series: series,
}
- option && myChart.setOption(option);
+ setTimeout(()=>{
+ var myChart = echarts.init(chartDom);
+ option && myChart.setOption(option);
+ }, 200)
},
ty_bar3() {
var chartDom = document.getElementById("pcgchart2");
- var myChart = echarts.init(chartDom);
var option
// var xData = function() {
@@ -631,7 +722,8 @@ export default {
option = {
// backgroundColor: "#141f56",
legend: {
- top: 260,
+ // top: 390,
+ bottom: 0,
right: 0,
itemGap: 35,
itemWidth: 20,
@@ -674,9 +766,9 @@ export default {
},
grid: {
borderWidth: 0,
- top: 230,
- bottom: 240,
- right: 20,
+ top: 50,
+ // bottom: '2rem',
+ right: 0,
left: 50,
textStyle: {
color: "#fff"
@@ -736,8 +828,188 @@ export default {
},
series: series,
}
+
+ setTimeout(()=>{
+ var myChart = echarts.init(chartDom);
+ option && myChart.setOption(option);
+ }, 200)
+ },
+ ty_pie1(){
+ let that = this;
+ var dataP = [{
+ name: '谷峰差收益',
+ value: 25,
+ },
+ {
+ name: '充电桩收益',
+ value: 75,
+ }
+ ];
+ function hexToRgba(hex, opacity) {
+ return (
+ 'rgba(' +
+ parseInt('0x' + hex.slice(1, 3)) +
+ ',' +
+ parseInt('0x' + hex.slice(3, 5)) +
+ ',' +
+ parseInt('0x' + hex.slice(5, 7)) +
+ ',' +
+ opacity +
+ ')'
+ );
+ }
+ let color = ['#00d2ff', '#22e5d1', '#f4d64e', '#0072ff'];
+ let color1=[], color2=[], color3=[];
+ // 设置每层圆环颜色和添加间隔的透明色
+ color.forEach((item) => {
+ color1.push(item, 'transparent');
+ color2.push(hexToRgba(item, 0.4), 'transparent');
+ color3.push(hexToRgba(item, 0.7), 'transparent');
+ });
+ let data1 = [];
+ let sum = 0;
+ // 根据总值设置间隔值大小
+ dataP.forEach((item) => {
+ sum += Number(item.value);
+ });
+ // 给每个数据后添加特定的透明的数据形成间隔
+ dataP.forEach((item, index) => {
+ if (item.value !== 0) {
+ data1.push(item, {
+ name: '',
+ value: sum / 70,
+ labelLine: {
+ show: false,
+ lineStyle: {
+ color: 'transparent',
+ },
+ },
+ itemStyle: {
+ color: 'transparent',
+ },
+ });
+ }
+ });
+ var option = {
+ tooltip: {
+ formatter: (params) => {
+ if (params.name !== '') {
+ return params.name + ' : ' + params.value + '\n' + '%';
+ }
+ },
+ },
+
+ grid: {
+ top: 0,
+ bottom: 0,
+ left: 0,
+ right: 0,
+ containLabel: true,
+ },
+
+ series: [
+ {
+ type: 'pie',
+ radius: ['90%', '80%'],
+ center: ['50%', '50%'],
+ hoverAnimation: false,
+ startAngle: 90,
+ selectedMode: 'single',
+ selectedOffset: 0,
+ itemStyle: {
+ normal: {
+ color: (params) => {
+ console.log('params', params)
+ return color2[params.dataIndex];
+ },
+ },
+ },
+ label: {
+ show: false,
+ formatter: '{b}' + ' ' + '{c}',
+ },
+ data: data1,
+ z: 666,
+ },
+ {
+ type: 'pie',
+ radius: ['90%', '100%'],
+ center: ['50%', '50%'],
+ hoverAnimation: false,
+ startAngle: 90,
+ selectedMode: 'single',
+ selectedOffset: 0,
+ itemStyle: {
+ normal: {
+ color: (params) => {
+ return color3[params.dataIndex];
+ },
+ },
+ },
+ label: {
+ show: false,
+ formatter: '{b}' + ' ' + '{c}',
+ },
+ data: data1,
+ z: 666,
+ },
+ ],
+ }
- option && myChart.setOption(option);
+ function run(myChart){
+ that.getStat();
+ // console.log('乱序重新绘制', that.daData.dkeys, that.data24h, data24h);
+ data24h = data24h.sort(function(a,b){
+ return Math.random() - 0.5;
+ });
+ let max=data24h[0];
+ for (let i = 0; i < data24h.length; i++) {
+ if (data24h[i]>max) {
+ max = data24h[i];
+ }
+ }
+ let dataLenArr = [], dataBGArr = [];
+ data24h.map(item=>{
+ dataLenArr.push(0);// 获取和数据一样长度的底部图形数组；
+ dataBGArr.push(max);// 数组最大值做背景柱形
+ })
+ myChart.setOption({
+ xAxis: {
+ data: that.daData.dkeys
+ },
+ series: [{
+ type: 'bar',
+ data: data24h,
+ },
+ {
+ type: 'scatter',
+ data: dataLenArr
+ },
+ {
+ name: '背景',
+ type: 'bar',
+ data: dataBGArr
+ },
+ ]
+ });
+ }
+ // 加延时器使图像绘制获取元素宽高最新的值
+ setTimeout(()=>{
+ var pieDom1 = document.getElementById("pieChart1");
+ var myChart = echarts.init(pieDom1);
+ option && myChart.setOption(option);
+
+ var pieDom2 = document.getElementById("pieChart2");
+ var myChart = echarts.init(pieDom2);
+ option && myChart.setOption(option);
+
+ var pieDom3 = document.getElementById("pieChart3");
+ var myChart = echarts.init(pieDom3);
+ option && myChart.setOption(option);
+ // setInterval(function () {
+ // run(myChart);
+ // }, 3000);
+ }, 200)
},
// 总计 体育场馆的总数
@@ -747,7 +1019,13 @@ export default {
// DAILY
homeApi.allTygGroupTimeNum({granularity:"daily",groupsId:groups}).then(res=>{
// 24h 人流趋势
- that.daData = res.data.data
+ that.daData = res.data.data;
+ const tmpdata = res.data.data.allTimeData;
+ let datas = []
+ Object.values(tmpdata).forEach((value) => {
+ datas.push(value.num)
+ });
+ that.data24h = datas;
const day_tmp=res.data.data.groupsData
//遍历加
@@ -755,12 +1033,14 @@ export default {
that.todayNum =+ item.noRepeatInNum
});
// 赋值
- that.cgp_1 = day_tmp[0].proportion
- that.cgn_1 = day_tmp[0].groupName
- that.cgp_2 = day_tmp[1].proportion
- that.cgn_2 = day_tmp[1].groupName
- that.cgp_3 = day_tmp[2].proportion
- that.cgn_3 = day_tmp[2].groupName
+ if(day_tmp.length>0){
+ that.cgp_1 = day_tmp[0].proportion
+ that.cgn_1 = day_tmp[0].groupName
+ that.cgp_2 = day_tmp[1].proportion
+ that.cgn_2 = day_tmp[1].groupName
+ that.cgp_3 = day_tmp[2].proportion
+ that.cgn_3 = day_tmp[2].groupName
+ }
})
// MONTHLY
@@ -1346,7 +1626,7 @@ export default {
\ No newline at end of file
+ 各场馆服务人次占比
+
+
+
+
+
+
+
-
- {{ cgp_1 }}
-
-
-
-
+
25%
+
- {{ cgn_1 }}
+ {{ cgn_1||0 }}
-
- {{ cgp_2 }}
-
-
-
-
+
@@ -102,11 +131,11 @@
25%
+
- {{ cgp_3 }}
-
-
+
@@ -118,10 +147,10 @@
25%
+
- 各场馆人流趋势
-
+ 各场馆服务人次趋势
+