|
|
@ -62,11 +62,11 @@ |
|
|
<div class="c_title">24小时进馆人数</div> |
|
|
<div class="c_title">24小时进馆人数</div> |
|
|
<div class="c_l" id="animationA"></div> |
|
|
<div class="c_l" id="animationA"></div> |
|
|
<div class="c_r"> |
|
|
<div class="c_r"> |
|
|
<span class="c_r_num">21312</span> |
|
|
<span class="c_r_num">{{ cgn_1 }}</span> |
|
|
<span class="c_r_txt">体育场</span> |
|
|
<span class="c_r_txt">体育场</span> |
|
|
<span class="c_r_num">21312</span> |
|
|
<span class="c_r_num">{{ cgn_2 }}</span> |
|
|
<span class="c_r_txt">体育馆</span> |
|
|
<span class="c_r_txt">体育馆</span> |
|
|
<span class="c_r_num">21312</span> |
|
|
<span class="c_r_num">{{ cgn_3 }}</span> |
|
|
<span class="c_r_txt">游泳场馆</span> |
|
|
<span class="c_r_txt">游泳场馆</span> |
|
|
</div> |
|
|
</div> |
|
|
<!-- v-for=" item in videoData" :key="item.key" --> |
|
|
<!-- v-for=" item in videoData" :key="item.key" --> |
|
|
@ -656,19 +656,22 @@ export default { |
|
|
var chartDom = document.getElementById("pcgchart2"); |
|
|
var chartDom = document.getElementById("pcgchart2"); |
|
|
|
|
|
|
|
|
var option |
|
|
var option |
|
|
// var xData = function() { |
|
|
|
|
|
// var data = []; |
|
|
|
|
|
// for (var i = 2011; i < 2017; i++) { |
|
|
|
|
|
// data.push(i + "年"); |
|
|
|
|
|
// } |
|
|
|
|
|
// return data; |
|
|
|
|
|
// }(); |
|
|
|
|
|
var xData = this.rsqsXData; |
|
|
var xData = this.rsqsXData; |
|
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',] |
|
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',] |
|
|
var name = this.rsqsDataName= ['体育场', '体育馆', '游泳场馆'] |
|
|
var name = this.rsqsDataName |
|
|
console.log(this.rsqsDataName, 'this.rsqsDataName') |
|
|
// console.log(this.rsqsDataName, 'this.rsqsDataName') |
|
|
// = ['体育场', '体育馆', '游泳场馆']; |
|
|
// = ['体育场', '体育馆', '游泳场馆']; |
|
|
var data = this.rsqsDataAll; |
|
|
var data = this.rsqsDataAll; |
|
|
|
|
|
let iconData = []; |
|
|
|
|
|
this.rsqsDataName.forEach((item, index)=>{ |
|
|
|
|
|
if(index==0){ |
|
|
|
|
|
iconData.push({icon: 'image://img/tyc_icon.png', name: name[0]}) |
|
|
|
|
|
}else if(index==1){ |
|
|
|
|
|
iconData.push({icon: 'image://img/tyg_icon.png', name: name[1]}) |
|
|
|
|
|
}else if(index==2){ |
|
|
|
|
|
iconData.push({icon: 'image://img/yyg_icon.png', name: name[2]}) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
var series = []; |
|
|
var series = []; |
|
|
for (var i = 0; i < data.length; i++) { |
|
|
for (var i = 0; i < data.length; i++) { |
|
|
@ -726,7 +729,7 @@ export default { |
|
|
// backgroundColor: "#141f56", |
|
|
// backgroundColor: "#141f56", |
|
|
legend: { |
|
|
legend: { |
|
|
// top: 390, |
|
|
// top: 390, |
|
|
bottom: 0, |
|
|
bottom: 10, |
|
|
right: 0, |
|
|
right: 0, |
|
|
itemGap: 35, |
|
|
itemGap: 35, |
|
|
itemWidth: 20, |
|
|
itemWidth: 20, |
|
|
@ -735,11 +738,7 @@ export default { |
|
|
color: '#fff', |
|
|
color: '#fff', |
|
|
fontSize: '14' |
|
|
fontSize: '14' |
|
|
}, |
|
|
}, |
|
|
data: [ |
|
|
data: iconData |
|
|
{ icon: 'image://img/tyc_icon.png', name: '体育场' }, |
|
|
|
|
|
{ icon: 'image://img/tyg_icon.png', name: '体育馆' }, |
|
|
|
|
|
{ icon: 'image://img/yyg_icon.png', name: '游泳场馆' }, |
|
|
|
|
|
] |
|
|
|
|
|
}, |
|
|
}, |
|
|
title: { |
|
|
title: { |
|
|
// text: "负面言论分领域趋势", |
|
|
// text: "负面言论分领域趋势", |
|
|
@ -832,10 +831,71 @@ export default { |
|
|
series: series, |
|
|
series: series, |
|
|
} |
|
|
} |
|
|
function run(myChart){ |
|
|
function run(myChart){ |
|
|
|
|
|
let that = this; |
|
|
// 获取新数据-处理 |
|
|
// 获取新数据-处理 |
|
|
myChart.setOption({ |
|
|
that.getGcgNumDatas(); |
|
|
series: series |
|
|
setTimeout(() => { |
|
|
}); |
|
|
var xData = this.rsqsXData; |
|
|
|
|
|
var data = this.rsqsDataAll; |
|
|
|
|
|
|
|
|
|
|
|
var series = []; |
|
|
|
|
|
for (var i = 0; i < data.length; i++) { |
|
|
|
|
|
series.push({ |
|
|
|
|
|
name: name[i], |
|
|
|
|
|
type: "line", |
|
|
|
|
|
symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ] |
|
|
|
|
|
symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' |
|
|
|
|
|
smooth: true, //是否平滑曲线显示 |
|
|
|
|
|
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示 |
|
|
|
|
|
areaStyle: { |
|
|
|
|
|
normal: { |
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
|
|
|
|
offset: 0, |
|
|
|
|
|
color: color[i] |
|
|
|
|
|
}, { |
|
|
|
|
|
offset: 0.8, |
|
|
|
|
|
color: 'rgba(255,255,255,0)' |
|
|
|
|
|
}], false), |
|
|
|
|
|
// shadowColor: 'rgba(255,255,255, 0.1)', |
|
|
|
|
|
shadowBlur: 10, |
|
|
|
|
|
opacity: 0.3, |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
normal: { |
|
|
|
|
|
color: color[i], |
|
|
|
|
|
lineStyle: { |
|
|
|
|
|
width: 1, |
|
|
|
|
|
type: 'solid' //'dotted'虚线 'solid'实线 |
|
|
|
|
|
}, |
|
|
|
|
|
borderColor: color[i], //图形的描边颜色。支持的格式同 color |
|
|
|
|
|
borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] |
|
|
|
|
|
barBorderRadius: 0, |
|
|
|
|
|
label: { |
|
|
|
|
|
show: false, |
|
|
|
|
|
}, |
|
|
|
|
|
opacity: 0.5, |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
markPoint: { |
|
|
|
|
|
data: [ |
|
|
|
|
|
{ |
|
|
|
|
|
name: '最大值', |
|
|
|
|
|
type: 'max' |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
data: data[i], |
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
myChart.setOption({ |
|
|
|
|
|
xAxis: [{data: xData}], |
|
|
|
|
|
series: series |
|
|
|
|
|
}); |
|
|
|
|
|
}, 200); |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
setTimeout(()=>{ |
|
|
setTimeout(()=>{ |
|
|
var myChart = echarts.init(chartDom); |
|
|
var myChart = echarts.init(chartDom); |
|
|
@ -849,22 +909,34 @@ export default { |
|
|
}, |
|
|
}, |
|
|
ty_pieDo(){ |
|
|
ty_pieDo(){ |
|
|
let that = this; |
|
|
let that = this; |
|
|
this.ty_pie("pieChart1",this.groupsData[0]); |
|
|
var pieDom1 = document.getElementById("pieChart1"); |
|
|
this.ty_pie("pieChart2",this.groupsData[1]); |
|
|
var pieDom2 = document.getElementById("pieChart2"); |
|
|
this.ty_pie("pieChart3",this.groupsData[2]); |
|
|
var pieDom3 = document.getElementById("pieChart3"); |
|
|
|
|
|
var myChart1 = echarts.init(pieDom1); |
|
|
|
|
|
var myChart2 = echarts.init(pieDom2); |
|
|
|
|
|
var myChart3 = echarts.init(pieDom3); |
|
|
|
|
|
|
|
|
function run(){ |
|
|
function run(){ |
|
|
that.gethomeBarData(); |
|
|
that.gethomeBarData(); |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
this.ty_pie("pieChart1",this.groupsData[0]); |
|
|
myChart1.clear(); |
|
|
this.ty_pie("pieChart2",this.groupsData[1]); |
|
|
that.ty_pie(myChart1,that.groupsData[0]); |
|
|
this.ty_pie("pieChart3",this.groupsData[2]); |
|
|
}, 500); |
|
|
}, 200); |
|
|
setTimeout(() => { |
|
|
|
|
|
myChart2.clear(); |
|
|
|
|
|
that.ty_pie(myChart2,that.groupsData[1]); |
|
|
|
|
|
}, 1000); |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
myChart3.clear(); |
|
|
|
|
|
that.ty_pie(myChart3,that.groupsData[2]); |
|
|
|
|
|
}, 1500); |
|
|
} |
|
|
} |
|
|
|
|
|
run(); |
|
|
setInterval(function () { |
|
|
setInterval(function () { |
|
|
run(); |
|
|
run(); |
|
|
}, 3000); |
|
|
}, 3000); |
|
|
}, |
|
|
}, |
|
|
ty_pie(ElementId,DD){ |
|
|
ty_pie(myChart,DD){ |
|
|
let that = this; |
|
|
let that = this; |
|
|
// console.log(num, '------') |
|
|
// console.log(num, '------') |
|
|
if(!DD){ |
|
|
if(!DD){ |
|
|
@ -992,8 +1064,7 @@ export default { |
|
|
|
|
|
|
|
|
// 加延时器使图像绘制获取元素宽高最新的值 |
|
|
// 加延时器使图像绘制获取元素宽高最新的值 |
|
|
setTimeout(()=>{ |
|
|
setTimeout(()=>{ |
|
|
var pieDom1 = document.getElementById(ElementId); |
|
|
// var myChart = echarts.init(Element); |
|
|
var myChart = echarts.init(pieDom1); |
|
|
|
|
|
option && myChart.setOption(option); |
|
|
option && myChart.setOption(option); |
|
|
}, 200) |
|
|
}, 200) |
|
|
}, |
|
|
}, |
|
|
@ -1003,7 +1074,7 @@ export default { |
|
|
let that = this |
|
|
let that = this |
|
|
const groups ="110|210|310"; |
|
|
const groups ="110|210|310"; |
|
|
// DAILY |
|
|
// DAILY |
|
|
homeApi.allTygGroupTimeNum({granularity:"daily",groupsId:groups}).then(res=>{ |
|
|
homeApi.allTygGroupTimeNum({granularity:"daily",groupsId:groups}).then(res=>{ |
|
|
// 24h 人流趋势 |
|
|
// 24h 人流趋势 |
|
|
that.daData = res.data.data; |
|
|
that.daData = res.data.data; |
|
|
const tmpdata = res.data.data.allTimeData; |
|
|
const tmpdata = res.data.data.allTimeData; |
|
|
@ -1018,15 +1089,6 @@ export default { |
|
|
day_tmp.forEach(item=>{ |
|
|
day_tmp.forEach(item=>{ |
|
|
that.todayNum =+ item.noRepeatInNum |
|
|
that.todayNum =+ item.noRepeatInNum |
|
|
}); |
|
|
}); |
|
|
// 赋值 |
|
|
|
|
|
// 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 |
|
|
// MONTHLY |
|
|
@ -1074,6 +1136,7 @@ export default { |
|
|
idArr += "|"+item.groupId; |
|
|
idArr += "|"+item.groupId; |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
|
|
|
that.groupsData = []; |
|
|
homeApi.homeBarData({groupsId:idArr}).then(res=>{ |
|
|
homeApi.homeBarData({groupsId:idArr}).then(res=>{ |
|
|
// console.log(res, '====='); |
|
|
// console.log(res, '====='); |
|
|
res.data.data.groupsData.forEach(item=>{ |
|
|
res.data.data.groupsData.forEach(item=>{ |
|
|
@ -2142,7 +2205,8 @@ export default { |
|
|
width: calc(24rem - 1.14rem) !important; |
|
|
width: calc(24rem - 1.14rem) !important; |
|
|
height: 10.71rem !important; |
|
|
height: 10.71rem !important; |
|
|
overflow: visible !important; |
|
|
overflow: visible !important; |
|
|
margin: 0px 0.57rem 0px 0.57rem !important; |
|
|
// margin: 0px 0.57rem 0px 0.57rem !important; |
|
|
|
|
|
margin: 0px auto !important; |
|
|
box-sizing: border-box !important; |
|
|
box-sizing: border-box !important; |
|
|
// transform-origin: center top !important; |
|
|
// transform-origin: center top !important; |
|
|
transform: scale(1) !important; |
|
|
transform: scale(1) !important; |
|
|
|
