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
| <!-- 雷达图 -->
| <template>
| <div
| ref="chartRef"
| class="relative w-full"
| :style="{ height: props.height }"
| v-loading="props.loading"
| ></div>
| </template>
|
| <script setup>
| import { useChartOps, useChartComponent } from '@/hooks/core/useChart'
| defineOptions({ name: 'ArtRadarChart' })
| const props = defineProps({
| height: { required: false, default: useChartOps().chartHeight },
| loading: { required: false, default: false },
| isEmpty: { required: false, default: false },
| colors: { required: false, default: () => useChartOps().colors },
| indicator: { required: false, default: () => [] },
| data: { required: false, default: () => [] },
| showTooltip: { required: false, default: true },
| showLegend: { required: false, default: false },
| legendPosition: { required: false, default: 'bottom' }
| })
| const { chartRef, isDark, getAnimationConfig, getTooltipStyle } = useChartComponent({
| props,
| checkEmpty: () => {
| return !props.data?.length || props.data.every((item) => item.value.every((val) => val === 0))
| },
| watchSources: [() => props.data, () => props.indicator, () => props.colors],
| generateOptions: () => {
| return {
| tooltip: props.showTooltip ? getTooltipStyle('item') : void 0,
| radar: {
| indicator: props.indicator,
| center: ['50%', '50%'],
| radius: '70%',
| axisName: {
| color: isDark.value ? '#ccc' : '#666',
| fontSize: 12
| },
| splitLine: {
| lineStyle: {
| color: isDark.value ? '#444' : '#e6e6e6'
| }
| },
| axisLine: {
| lineStyle: {
| color: isDark.value ? '#444' : '#e6e6e6'
| }
| },
| splitArea: {
| show: true,
| areaStyle: {
| color: isDark.value
| ? ['rgba(255, 255, 255, 0.02)', 'rgba(255, 255, 255, 0.05)']
| : ['rgba(0, 0, 0, 0.02)', 'rgba(0, 0, 0, 0.05)']
| }
| }
| },
| series: [
| {
| type: 'radar',
| data: props.data.map((item, index) => ({
| name: item.name,
| value: item.value,
| symbolSize: 4,
| lineStyle: {
| width: 2,
| color: props.colors[index % props.colors.length]
| },
| itemStyle: {
| color: props.colors[index % props.colors.length]
| },
| areaStyle: {
| color: props.colors[index % props.colors.length],
| opacity: 0.1
| },
| emphasis: {
| areaStyle: {
| opacity: 0.25
| },
| lineStyle: {
| width: 3
| }
| }
| })),
| ...getAnimationConfig(200, 1800)
| }
| ]
| }
| }
| })
| </script>
|
|
