user-style-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
98
99
100
101
102
103
104
105
<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="chartOption" style="width: 100%" />
</div>
</div>
</a-card>
</template>
<script lang="ts" setup>
import useChartOption from '@/hooks/chart-option';
import { onMounted, ref } from 'vue';
import Chart from '@/components/chart/index.vue';
import useDashboardApi from '@/http/dashboard';
import { ToolTipFormatterParams } from '@/types/echarts';
type recordType = { value: number; name: string };
const record = ref<recordType[]>([]);
const { chartOption } = useChartOption(() => {
return {
grid: { left: 0, right: 0, top: 0, bottom: 0 },
label: { show: false },
tooltip: {
show: true,
trigger: 'item',
formatter(params) {
const item = params as ToolTipFormatterParams;
return `
<div class="content-panel">
<p>
<span style="background-color: ${item.color}" class="tooltip-item-icon"></span>
<span style="margin-right: 10px">${item.name}</span>
</p>
<span class="tooltip-value">${item.value?.toLocaleString()}</span>
<span class="tooltip-value">${item.percent?.toLocaleString()}%</span>
</div>`;
},
className: 'echarts-tooltip-diy',
},
series: [{ type: 'pie', radius: ['65%', '90%'], label: { show: false }, data: record.value }],
};
});
onMounted(async () => {
record.value = await useDashboardApi.userStyle();
});
</script>
<style lang="less" scoped>
.echarts-tooltip-diy {
background: none !important;
border: none !important;
}
: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>