双环饼图
<template>
<div ref="chart" style="width: 800px; height: 350px"></div>
</template>
<script>
export default {
data() {
return {
chartData: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" },
],
};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
const chart = echarts.init(this.$refs.chart);
const option = {
tooltip: {
trigger: "item",
confine: true,
},
legend: {
data: this.chartData.map((x) => x.name),
icon: "rect",
itemWidth: 12,
itemHeight: 5,
padding: [5, 20],
textStyle: {
color: "#000",
fontSize: 12,
},
left: "center",
bottom: "0px",
backgroundColor: "rgba(0, 0, 0, 0.13)", // 在这里设置图例背景色
},
tooltip: {
trigger: "item",
confine: true,
},
series: [
// 主要展示层的 - 内层(小 [前两个数据]
{
center: ["50%", "50%"],
radius: ["45%", "50%"],
hoverAnimation: false, //鼠标移入变大
type: "pie",
label: {
normal: {
show: false,
formatter: "{c}%",
},
emphasis: {
show: false,
},
},
data: this.chartData.slice(0, 2),
},
// 外层 - 大
{
center: ["50%", "50%"],
radius: ["54%", "64%"],
hoverAnimation: false, //鼠标移入变大
type: "pie",
label: {
normal: {
show: false,
formatter: "{c}%",
},
emphasis: {
show: false,
},
},
data: this.chartData.slice(2),
},
{
name: "内边框",
type: "pie",
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ["50%", "50%"],
radius: ["40%", "42%"],
label: {
normal: {
show: false,
},
},
tooltip: {
show: false,
},
data: [
{
value: 8,
itemStyle: {
normal: {
color: "rgba(62, 207, 255, 0.4)",
},
},
},
],
},
{
name: "外边框",
type: "pie",
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ["50%", "50%"],
radius: ["67%", "70%"],
label: {
normal: {
show: false,
},
},
tooltip: {
show: false,
},
data: [
{
value: 8,
itemStyle: {
normal: {
color: "rgba(62, 207, 255, 0.4)",
},
},
},
],
},
],
};
chart.setOption(option);
},
},
};
</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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
显示代码 复制代码 复制代码