user-total-card.vue
2.59 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
<template>
<a-card>
<div class="content-wrap">
<div class="content">
<div data-v-55251d00="" class="arco-statistic">
<div class="arco-statistic-title">用户概览</div>
<div class="arco-statistic-content">
<div class="arco-statistic-value">
<span class="arco-statistic-value-integer"></span>
</div>
</div>
</div>
</div>
<div class="chart">
<Chart :option="registerChart" style="width: 100%" />
</div>
</div>
</a-card>
</template>
<script lang="ts" setup>
import useChartOption from '@/hooks/chart-option';
import { onMounted, ref } from 'vue';
import useDashboardApi from '@/http/dashboard';
import { ToolTipFormatterParams } from '@/types/echarts';
const record = ref<{ type: string[]; data: number[] }>({ type: [], data: [] });
const formatTooltip = (params: ToolTipFormatterParams[]) => {
const [firstElement] = params;
return `<div class="content-panel">
<p>
<span style="background-color: ${firstElement.color}" class="tooltip-item-icon"></span>
<span>${firstElement.name}</span>
</p>
<span class="tooltip-value">${firstElement.value?.toLocaleString()}</span>
</div>`;
};
const { chartOption: registerChart } = useChartOption(() => {
return {
grid: { left: 0, right: 0, top: 10, bottom: 5 },
xAxis: { type: 'category', show: false, boundaryGap: true, data: record.value.type },
yAxis: { show: false, type: 'value', scale: true },
tooltip: {
show: true,
trigger: 'axis',
formatter: (params) => formatTooltip(params as ToolTipFormatterParams[]),
className: 'echarts-tooltip-diy',
},
series: { data: record.value.data, type: 'bar', barWidth: 16, itemStyle: { borderRadius: 2, color: '#165DFF' } },
};
});
onMounted(async () => {
record.value = await useDashboardApi.userTotal();
});
</script>
<style lang="less" scoped>
:deep(.arco-card) {
border-radius: 4px;
}
:deep(.arco-card-body) {
width: 100%;
height: 134px;
}
.content-wrap {
width: 100%;
height: 100%;
display: flex;
white-space: nowrap;
.content {
width: 108px;
:deep(.arco-statistic) {
.arco-statistic-title {
font-size: 14px;
font-weight: bold;
white-space: nowrap;
}
.arco-statistic-content {
margin-top: 10px;
}
}
}
.chart {
width: calc(100% - 108px);
vertical-align: bottom;
}
}
</style>