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
| <!-- 散点图 -->
| <template>
| <div
| ref="chartRef"
| class="relative w-full"
| :style="{ height: props.height }"
| v-loading="props.loading"
| >
| </div>
| </template>
|
| <script setup>
| import { getCssVar } from '@/utils/ui'
| import { useChartOps, useChartComponent } from '@/hooks/core/useChart'
| defineOptions({ name: 'ArtScatterChart' })
| 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 },
| data: { required: false, default: () => [{ value: [0, 0] }, { value: [0, 0] }] },
| symbolSize: { required: false, default: 14 },
| showAxisLabel: { required: false, default: true },
| showAxisLine: { required: false, default: true },
| showSplitLine: { required: false, default: true },
| showTooltip: { required: false, default: true },
| showLegend: { required: false, default: false },
| legendPosition: { required: false, default: 'bottom' }
| })
| const {
| chartRef,
| isDark,
| getAxisLineStyle,
| getAxisLabelStyle,
| getAxisTickStyle,
| getSplitLineStyle,
| getAnimationConfig,
| getTooltipStyle
| } = useChartComponent({
| props,
| checkEmpty: () => {
| return !props.data?.length || props.data.every((item) => item.value.every((val) => val === 0))
| },
| watchSources: [() => props.data, () => props.colors, () => props.symbolSize],
| generateOptions: () => {
| const computedColor = props.colors[0] || getCssVar('--el-color-primary')
| return {
| grid: {
| top: 20,
| right: 20,
| bottom: 20,
| left: 20,
| containLabel: true
| },
| tooltip: props.showTooltip
| ? getTooltipStyle('item', {
| formatter: (params) => {
| const [x, y] = params.value
| return `X: ${x}<br/>Y: ${y}`
| }
| })
| : void 0,
| xAxis: {
| type: 'value',
| axisLabel: getAxisLabelStyle(props.showAxisLabel),
| axisLine: getAxisLineStyle(props.showAxisLine),
| axisTick: getAxisTickStyle(),
| splitLine: getSplitLineStyle(props.showSplitLine)
| },
| yAxis: {
| type: 'value',
| axisLabel: getAxisLabelStyle(props.showAxisLabel),
| axisLine: getAxisLineStyle(props.showAxisLine),
| axisTick: getAxisTickStyle(),
| splitLine: getSplitLineStyle(props.showSplitLine)
| },
| series: [
| {
| type: 'scatter',
| data: props.data,
| symbolSize: props.symbolSize,
| itemStyle: {
| color: computedColor,
| shadowBlur: 6,
| shadowColor: isDark.value ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
| shadowOffsetY: 2
| },
| emphasis: {
| itemStyle: {
| shadowBlur: 12,
| shadowColor: isDark.value ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)'
| },
| scale: true
| },
| ...getAnimationConfig()
| }
| ]
| }
| }
| })
| </script>
|
|
