提交 | 用户 | 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'; |
8a1406
|
10 |
|
45a8eb
|
11 |
const props = defineProps({ |
V |
12 |
loading: Boolean, |
|
13 |
width: { |
|
14 |
type: String as PropType<string>, |
|
15 |
default: '100%', |
8a1406
|
16 |
}, |
45a8eb
|
17 |
height: { |
V |
18 |
type: String as PropType<string>, |
|
19 |
default: '300px', |
8a1406
|
20 |
}, |
V |
21 |
}); |
45a8eb
|
22 |
const chartRef = ref<HTMLDivElement | null>(null); |
V |
23 |
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
dc4b05
|
24 |
|
45a8eb
|
25 |
watch( |
V |
26 |
() => props.loading, |
|
27 |
() => { |
|
28 |
if (props.loading) { |
|
29 |
return; |
|
30 |
} |
|
31 |
setOptions({ |
|
32 |
legend: { |
|
33 |
bottom: 0, |
|
34 |
data: ['访问', '购买'], |
|
35 |
}, |
|
36 |
tooltip: {}, |
|
37 |
radar: { |
|
38 |
radius: '60%', |
|
39 |
splitNumber: 8, |
|
40 |
indicator: [ |
|
41 |
{ |
|
42 |
text: '电脑', |
|
43 |
max: 100, |
|
44 |
}, |
|
45 |
{ |
|
46 |
text: '充电器', |
|
47 |
max: 100, |
|
48 |
}, |
|
49 |
{ |
|
50 |
text: '耳机', |
|
51 |
max: 100, |
|
52 |
}, |
|
53 |
{ |
|
54 |
text: '手机', |
|
55 |
max: 100, |
|
56 |
}, |
|
57 |
{ |
|
58 |
text: 'Ipad', |
|
59 |
max: 100, |
|
60 |
}, |
|
61 |
{ |
|
62 |
text: '耳机', |
|
63 |
max: 100, |
|
64 |
}, |
|
65 |
], |
|
66 |
}, |
|
67 |
series: [ |
|
68 |
{ |
|
69 |
type: 'radar', |
|
70 |
symbolSize: 0, |
|
71 |
areaStyle: { |
|
72 |
shadowBlur: 0, |
|
73 |
shadowColor: 'rgba(0,0,0,.2)', |
|
74 |
shadowOffsetX: 0, |
|
75 |
shadowOffsetY: 10, |
|
76 |
opacity: 1, |
|
77 |
}, |
|
78 |
data: [ |
|
79 |
{ |
|
80 |
value: [90, 50, 86, 40, 50, 20], |
|
81 |
name: '访问', |
|
82 |
itemStyle: { |
|
83 |
color: '#b6a2de', |
|
84 |
}, |
|
85 |
}, |
|
86 |
{ |
|
87 |
value: [70, 75, 70, 76, 20, 85], |
|
88 |
name: '购买', |
|
89 |
itemStyle: { |
|
90 |
color: '#5ab1ef', |
|
91 |
}, |
|
92 |
}, |
|
93 |
], |
|
94 |
}, |
|
95 |
], |
|
96 |
}); |
|
97 |
}, |
56a966
|
98 |
{ immediate: true }, |
45a8eb
|
99 |
); |
8a1406
|
100 |
</script> |