hbar.vue
3.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!-- 逛店数量统计 -->
<!-- 停留时长统计 -->
<template>
<div>
<!-- 顶部区域 S-->
<div class="ipage_top">
<div class="tit"><img :src="bindIcon('renyuan')"/>{{title||chartData.title}}</div>
<div class="acts"></div>
</div>
<el-row class="ipart ipart2" :gutter="12">
<el-col>
<p v-if="ckey=='zone_visited_statistics'" class="ctitle">{{$t('iPage.zoneaverage')}}<span v-html="countVal"></span></p>
<!-- <p v-if="ckey=='stay_time_statistics'" class="ctitle">{{$t('iPage.stayaverage')}}<span v-html="countVal"></span></p> -->
<div class="ichart">
<bar-chart ref="chart" :cdata="chartData" tval="hbar"></bar-chart>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import mixin from './mixin';
import mallData from '@/components/Echarts/data';
/**********************************************************/
import _ from 'underscore';
const chartsConfig = {
default:{ //默认
otherConf:{
_color:['#90BDFF'],
reverseAxis:true,
labelPosition:'right',
grid:{
top: 40, right:20, bottom: 20, left: 40
},
showCount:false,
usePercent:true
}
}
};
/*******************************************************/
export default {
mixins: [mixin],
data() {
return {
countVal:'',
configObj:{}
}
},
created() {
},
methods: {
getChartsConfig(){
return chartsConfig;
},
loadChartData(params){
this.chartId = this.getChartId(this.ckey);
if(this.chartId){
this.ajaxModuleData().then(data=>{
this.setChartData(data);
});
}else{
this.setChartData();
}
},
setChartData(data){
try{
let countVal = _.findWhere(data.series,{name:'avg'}).data[0];
data.series = _.filter(data.series,item=>item.name!='avg');
if(countVal||countVal==0){
this.countVal = typeof countVal=='string'?countVal.replace('分',' mins').replaceAll(/\d+/g,'<em>$&</em>'):`<em>${countVal}</em>${this.$t('iPage.number')}`;
}
let floorData = JSON.parse(JSON.stringify({...data,yaxis:data.xaxis}));
if(floorData.series[0].data.length){
this.maxNum = (_.max(floorData.series[0].data))*1.25;
floorData.series[1] = {
name: 'background',
type: 'bar',
label:{
show:true
},
itemStyle: {
normal: {
barBorderRadius: 0,
color: '#F5F7F9'
}
},
/*emphasis:{
itemStyle:{
color: '#F5F7F9'
}
},*/
barGap: '-100%',
z: 0,
data: new Array(floorData.series[0].data.length).fill(this.maxNum)
};
}else{
floorData.series = [];
}
this.chartData = Object.assign({},floorData,{
otherConf:this.configObj.otherConf||{}
});
}catch(err){
this.chartData = {otherConf:{}}
}
}
}
}
</script>
<style lang="less" scoped>
.ctitle{
position:absolute;
left:3%;
top:2%;
font-size: 14px;
z-index: 9;
em{
font-size: 16px;
font-weight: 600;
font-style:normal;
margin-left: 5px;
margin-right: 2px;
}
}
</style>