ResidenceTime.nvue
3.24 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<template>
<CardNvue :title="t('PreMallIndex.StayTimeDistribution')">
<template #content>
<ChartsNvue ref="chartsRef" />
</template>
</CardNvue>
</template>
<script setup>
import {
getResidenceTimeApi
} from '@/api'
import CardNvue from './Card.nvue'
import ChartsNvue from '@/components/Charts.nvue'
import {
onMounted,
ref
} from 'vue'
// #ifdef APP || H5
import * as echarts from 'echarts';
// #endif
// #ifdef MP-WEIXIN
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min');
// #endif
import { t } from '@/plugins/index.js'
const chartsRef = ref(null)
onMounted(() => {
// getTrendChartData()
})
const options = ref({})
const initData = (params) => {
options.value = params
getTrendChartData(params)
}
defineExpose({
initData
})
const getTrendChartData = async () => {
try {
// 参数设置位置：
const params = {
orgId: options.value.storeId,
startDate: options.value.startDate,
endDate: options.value.endDate,
type: 'bar'
}
const {
data
} = await getResidenceTimeApi(params)
const {
ResidenceTimeReport
} = data.body
renderCharts(ResidenceTimeReport)
} catch (e) {
console.log(e);
}
}
const renderCharts = (val = {
series: [{
data: [],
name: ''
}],
title: '',
xaxis: {
data: []
}
}) => {
const option = {
grid: {
bottom: '0%',
left: '0',
right: '2%',
top: '10%',
containLabel: true
},
tooltip: {
trigger: 'axis',
triggerOn:'click',
confine: true,
// #ifdef APP-NVUE
formatter:`function(params){
const item = params[0]
return item.seriesName + '\\n' + item.name + ':' + item.value + '%'
}`,
// #endif
// #ifndef APP-NVUE
formatter: function(params) {
return `${params[0].seriesName}\n${params[0].name}:${params[0].value}% `
},
// #endif
},
xAxis: {
type: 'category',
boundaryGap: true,
data: val.xaxis.data,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#E1E4EA'
}
},
axisLabel: {
color: '#202328'
}
},
yAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: "#E8E8E8",
type: "dotted" // dotted 虚线
}
},
// 最小值1
axisLabel: {
color: '#202328',
// #ifndef APP-NVUE
formatter: `function(value){
return value + '%'
}`,
// #endif
// #ifndef APP-NVUE
formatter: function(value, index) {
return value + '%'
},
// #endif
}
},
series: [{
name: t('PreAccIndex.ResidenceTime'), // '停留时长',
data: val.series?.[0]?.data || [],
type: 'bar',
itemStyle: {
color: '#387CF5'
},
barWidth: '20px',
}]
}
chartsRef.value?.initCharts(option)
}
</script>
<style>
</style>