# 一.scatter3D
# 1.多个饼图
饼图背景
查看代码详情
```vue
<template>
<WebPie3d :config="getOptions" :data="data"></WebPie3d>
</template>
<script>
export default {
data() {
return {
data: [],
};
},
async created() {
let res = await this.$api.getPie(1);
if (res.data) {
this.data = res.data.map((item) => ({ ...item, value: item.descript }));
}
},
methods: {
getOptions(data) {
return {
title: {
text: "多个xAxis + 多个yAxis + 多个折线图",
subtext: "单位：时",
},
tooltip: {},
backgroundColor: "#fff",
visualMap: {
show: false,
dimension: 2,
min: -1,
max: 1,
inRange: {
color: [
"#313695",
"#4575b4",
"#74add1",
"#abd9e9",
"#e0f3f8",
"#ffffbf",
"#fee090",
"#fdae61",
"#f46d43",
"#d73027",
"#a50026",
],
},
},
xAxis3D: {
type: "value",
},
yAxis3D: {
type: "value",
},
zAxis3D: {
type: "value",
max: 1,
splitNumber: 2,
},
grid3D: {
viewControl: {
// projection: 'orthographic'
},
boxHeight: 40,
},
series: [
{
type: "surface",
wireframe: {
show: false,
},
shading: "color",
equation: {
x: {
step: 0.05,
min: -3,
max: 3,
},
y: {
step: 0.05,
min: -3,
max: 3,
},
z: function (x, y) {
return (Math.sin(x * x + y * y) * x) / 3.14;
},
},
},
],
};
},
},
};
</script>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
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
# 2.多个饼图
饼图背景
查看代码详情
<template>
<WebPie3d :config="getOptions" :data="data"></WebPie3d>
</template>
<script>
export default {
data() {
return {
data: [],
};
},
async created() {
let res = await this.$api.getPie(1);
if (res.data) {
this.data = res.data.map((item) => ({ ...item, value: item.descript }));
}
},
methods: {
getOptions(data) {
return {
backgroundColor: "#000",
title: {
text: "10000000 GPS Points",
left: "center",
textStyle: {
color: "#fff",
},
},
geo: {
map: "world",
roam: true,
label: {
emphasis: {
show: false,
},
},
silent: true,
itemStyle: {
normal: {
areaColor: "#323c48",
borderColor: "#111",
},
emphasis: {
areaColor: "#2a333d",
},
},
},
series: [
{
name: "弱",
type: "scatterGL",
progressive: 1e6,
coordinateSystem: "geo",
symbolSize: 1,
zoomScale: 0.002,
blendMode: "lighter",
large: true,
itemStyle: {
color: "rgb(20, 15, 2)",
},
postEffect: {
enable: true,
},
silent: true,
dimensions: ["lng", "lat"],
data: new Float32Array(),
},
],
};
},
},
};
</script>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
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