提交 | 用户 | age
|
8a1406
|
1 |
<template> |
V |
2 |
<Card title="访问来源" :loading="loading"> |
|
3 |
<div ref="chartRef" :style="{ width, height }"></div> |
|
4 |
</Card> |
|
5 |
</template> |
45a8eb
|
6 |
<script lang="ts" setup> |
V |
7 |
import { Ref, ref, watch } from 'vue'; |
8a1406
|
8 |
import { Card } from 'ant-design-vue'; |
663d13
|
9 |
import { useECharts } from '/@/hooks/web/useECharts'; |
45a8eb
|
10 |
const props = defineProps({ |
V |
11 |
loading: Boolean, |
|
12 |
width: { |
|
13 |
type: String as PropType<string>, |
|
14 |
default: '100%', |
8a1406
|
15 |
}, |
45a8eb
|
16 |
height: { |
V |
17 |
type: String as PropType<string>, |
|
18 |
default: '300px', |
8a1406
|
19 |
}, |
V |
20 |
}); |
45a8eb
|
21 |
const chartRef = ref<HTMLDivElement | null>(null); |
V |
22 |
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
dc4b05
|
23 |
|
45a8eb
|
24 |
watch( |
V |
25 |
() => props.loading, |
|
26 |
() => { |
|
27 |
if (props.loading) { |
|
28 |
return; |
|
29 |
} |
|
30 |
setOptions({ |
|
31 |
tooltip: { |
|
32 |
trigger: 'item', |
|
33 |
}, |
|
34 |
legend: { |
|
35 |
bottom: '1%', |
|
36 |
left: 'center', |
|
37 |
}, |
|
38 |
series: [ |
|
39 |
{ |
|
40 |
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'], |
|
41 |
name: '访问来源', |
|
42 |
type: 'pie', |
|
43 |
radius: ['40%', '70%'], |
|
44 |
avoidLabelOverlap: false, |
|
45 |
itemStyle: { |
|
46 |
borderRadius: 10, |
|
47 |
borderColor: '#fff', |
|
48 |
borderWidth: 2, |
|
49 |
}, |
|
50 |
label: { |
|
51 |
show: false, |
|
52 |
position: 'center', |
|
53 |
}, |
|
54 |
emphasis: { |
|
55 |
label: { |
|
56 |
show: true, |
|
57 |
fontSize: '12', |
|
58 |
fontWeight: 'bold', |
|
59 |
}, |
|
60 |
}, |
|
61 |
labelLine: { |
|
62 |
show: false, |
|
63 |
}, |
|
64 |
data: [ |
|
65 |
{ value: 1048, name: '搜索引擎' }, |
|
66 |
{ value: 735, name: '直接访问' }, |
|
67 |
{ value: 580, name: '邮件营销' }, |
|
68 |
{ value: 484, name: '联盟广告' }, |
|
69 |
], |
|
70 |
animationType: 'scale', |
|
71 |
animationEasing: 'exponentialInOut', |
|
72 |
animationDelay: function () { |
|
73 |
return Math.random() * 100; |
|
74 |
}, |
|
75 |
}, |
|
76 |
], |
|
77 |
}); |
|
78 |
}, |
56a966
|
79 |
{ immediate: true }, |
45a8eb
|
80 |
); |
8a1406
|
81 |
</script> |