SunlightScatterChart
散点图组件，用于展示两个变量之间的关系，适用于相关性分析、分布分析等场景。
基本用法
基础散点图
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="24">
<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 15px; color: #666; font-size: 16px;">基础散点图</h4>
<SunlightScatterChart
:data="basicScatterData"
height="300px"
/>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { SunlightScatterChart } from 'sunlight-ui';
import {ref} from "vue";
// 散点图示例数据
const basicScatterData = ref([
{ value: [10, 20] },
{ value: [20, 30] },
{ value: [30, 40] },
{ value: [40, 50] },
{ value: [50, 60] },
{ value: [60, 70] },
{ value: [70, 80] },
{ value: [80, 90] },
{ value: [90, 100] },
{ value: [100, 110] }
]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
}
h3 {
margin-bottom: 20px;
color: #333;
font-size: 16px;
font-weight: 600;
}
</style>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
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
隐藏源代码
多系列散点图
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="24">
<div
style="
background-color: #ffffff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
"
>
<h4 style="margin-bottom: 15px; color: #666; font-size: 16px">多系列散点图</h4>
<SunlightScatterChart :data="multiScatterData" height="300px" :showLegend="true" legendPosition="bottom" />
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { SunlightScatterChart } from "sunlight-ui";
import { ref } from "vue";
// 多系列散点图数据
const multiScatterData = ref([
{
name: "系列1",
data: [{ value: [10, 20] }, { value: [20, 40] }, { value: [30, 60] }, { value: [40, 80] }, { value: [50, 100] }],
},
{
name: "系列2",
data: [{ value: [20, 10] }, { value: [40, 30] }, { value: [60, 50] }, { value: [80, 70] }, { value: [100, 90] }],
},
]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
}
h3 {
margin-bottom: 20px;
color: #333;
font-size: 16px;
font-weight: 600;
}
</style>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
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
隐藏源代码
自定义大小散点图
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="24">
<div
style="
background-color: #ffffff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
"
>
<h4 style="margin-bottom: 15px; color: #666; font-size: 16px">自定义大小散点图</h4>
<SunlightScatterChart :data="sizeScatterData" height="300px" :symbol-size="20" :colors="['#E6A23C']" />
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { SunlightScatterChart } from "sunlight-ui";
import { ref } from "vue";
const sizeScatterData = ref([
{ value: [15, 25] },
{ value: [25, 35] },
{ value: [35, 45] },
{ value: [45, 55] },
{ value: [55, 65] },
{ value: [65, 75] },
{ value: [75, 85] },
]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
}
h3 {
margin-bottom: 20px;
color: #333;
font-size: 16px;
font-weight: 600;
}
</style>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
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
隐藏源代码
散点图特殊样式
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="24">
<div
style="
background-color: #ffffff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
"
>
<h4 style="margin-bottom: 15px; color: #666; font-size: 16px">散点图特殊样式</h4>
<SunlightScatterChart
:data="specialStyleScatterData"
height="300px"
:showLegend="true"
legendPosition="bottom"
/>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { SunlightScatterChart } from "sunlight-ui";
import { ref } from "vue";
// 散点图特殊样式数据
const specialStyleScatterData = ref([
{
name: "三角形点",
data: [{ value: [10, 20] }, { value: [20, 30] }, { value: [30, 40] }],
},
{
name: "方形点",
data: [{ value: [15, 25] }, { value: [25, 35] }, { value: [35, 45] }],
},
{
name: "钻石点",
data: [{ value: [20, 30] }, { value: [30, 40] }, { value: [40, 50] }],
},
]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
}
h3 {
margin-bottom: 20px;
color: #333;
font-size: 16px;
font-weight: 600;
}
</style>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
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
隐藏源代码
自定义颜色散点图
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="24">
<div
style="
background-color: #ffffff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
"
>
<h4 style="margin-bottom: 15px; color: #666; font-size: 16px">自定义颜色散点图</h4>
<SunlightScatterChart
:data="customColorScatterData"
height="300px"
:showLegend="true"
legendPosition="bottom"
/>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { SunlightScatterChart } from "sunlight-ui";
import { ref } from "vue";
// 自定义颜色散点图数据
const customColorScatterData = ref([
{
name: "红色系列",
data: [{ value: [10, 20] }, { value: [20, 30] }, { value: [30, 40] }],
color: "#F56C6C",
},
{
name: "蓝色系列",
data: [{ value: [15, 25] }, { value: [25, 35] }, { value: [35, 45] }],
color: "#409EFF",
},
{
name: "绿色系列",
data: [{ value: [20, 30] }, { value: [30, 40] }, { value: [40, 50] }],
color: "#67C23A",
},
]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
}
h3 {
margin-bottom: 20px;
color: #333;
font-size: 16px;
font-weight: 600;
}
</style>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
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
隐藏源代码
带自定义标题的散点图
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="24">
<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 15px; color: #666; font-size: 16px;">带自定义标题的散点图</h4>
<SunlightScatterChart
:data="noGridScatterData"
height="300px"
:showSplitLine="false"
:showTitle="true"
title="散点图标题"
titlePosition="center"
:titleStyle="{
fontSize: 18,
fontWeight: 'bold',
color: '#333'
}"
/>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { SunlightScatterChart } from 'sunlight-ui';
import {ref} from "vue";
const noGridScatterData = ref([
{ value: [10, 20] },
{ value: [20, 30] },
{ value: [30, 40] },
{ value: [40, 50] },
{ value: [50, 60] },
{ value: [60, 70] },
{ value: [70, 80] },
{ value: [80, 90] },
{ value: [90, 100] }
]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
}
h3 {
margin-bottom: 20px;
color: #333;
font-size: 16px;
font-weight: 600;
}
</style>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
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
隐藏源代码
顶部图例散点图
vue
<template>
<div class="demo-container">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="24">
<div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 15px; color: #666; font-size: 16px;">顶部图例散点图</h4>
<SunlightScatterChart
:data="topLegendScatterData"
height="300px"
:showLegend="true"
legendPosition="top"
/>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { SunlightScatterChart } from 'sunlight-ui';
import {ref} from "vue";
// 顶部图例散点图数据
const topLegendScatterData = ref([
{
name: '系列A',
data: [
{ value: [10, 20] },
{ value: [20, 30] },
{ value: [30, 40] }
]
},
{
name: '系列B',
data: [
{ value: [15, 25] },
{ value: [25, 35] },
{ value: [35, 45] }
]
},
{
name: '系列C',
data: [
{ value: [20, 30] },
{ value: [30, 40] },
{ value: [40, 50] }
]
}
]);
</script>
<style scoped>
.demo-container {
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
}
h3 {
margin-bottom: 20px;
color: #333;
font-size: 16px;
font-weight: 600;
}
</style>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
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
隐藏源代码
组件属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | ScatterData | 必填 | 散点图数据 |
height | string | '350px' | 图表高度 |
showLegend | boolean | false | 是否显示图例 |
legendPosition | 'bottom' | 'top' | 'left' | 'right' | 'bottom' | 图例位置 |
showTooltip | boolean | true | 是否显示提示框 |
loading | boolean | false | 是否加载中 |
isEmpty | boolean | false | 是否为空数据 |
showSplitLine | boolean | true | 是否显示分割线 |
showAxisLine | boolean | true | 是否显示轴线 |
showAxisLabel | boolean | true | 是否显示轴标签 |
组件说明
SunlightScatterChart 是一个散点图组件，用于展示两个变量之间的关系，适用于相关性分析、分布分析等场景。