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
| <template>
| <div class="card content-box">
| <ECharts :option="option" />
| </div>
| </template>
|
| <script setup lang="ts" name="nestedChart">
| import { ECOption } from "@/components/ECharts/config";
| import ECharts from "@/components/ECharts/index.vue";
|
| const option: ECOption = {
| tooltip: {
| trigger: "item",
| formatter: "{a} <br/>{b}: {c} ({d}%)"
| },
| legend: {
| data: ["Direct", "Marketing", "Search Engine", "Email", "Union Ads", "Video Ads", "Baidu", "Google", "Bing", "Others"],
| textStyle: {
| color: "#a1a1a1"
| }
| },
| series: [
| {
| name: "Access From",
| type: "pie",
| selectedMode: "single",
| radius: [0, "30%"],
| label: {
| position: "inner",
| fontSize: 14
| },
| labelLine: {
| show: false
| },
| data: [
| { value: 1548, name: "Search Engine" },
| { value: 775, name: "Direct" },
| { value: 679, name: "Marketing", selected: true }
| ]
| },
| {
| name: "Access From",
| type: "pie",
| radius: ["45%", "60%"],
| labelLine: {
| length: 30
| },
| label: {
| formatter: "{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ",
| backgroundColor: "#F6F8FC",
| borderColor: "#8C8D8E",
| borderWidth: 1,
| borderRadius: 4,
| rich: {
| a: {
| color: "#6E7079",
| lineHeight: 22,
| align: "center"
| },
| hr: {
| borderColor: "#8C8D8E",
| width: "100%",
| borderWidth: 1,
| height: 0
| },
| b: {
| color: "#4C5058",
| fontSize: 14,
| fontWeight: "bold",
| lineHeight: 33
| },
| per: {
| color: "#fff",
| backgroundColor: "#4C5058",
| padding: [3, 4],
| borderRadius: 4
| }
| }
| },
| data: [
| { value: 1048, name: "Baidu" },
| { value: 335, name: "Direct" },
| { value: 310, name: "Email" },
| { value: 251, name: "Google" },
| { value: 234, name: "Union Ads" },
| { value: 147, name: "Bing" },
| { value: 135, name: "Video Ads" },
| { value: 102, name: "Others" }
| ]
| }
| ]
| };
| </script>
|
| <style scoped lang="scss">
| @import "./index.scss";
| </style>
|
|
