单环图
<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: ['50%', '60%'],
hoverAnimation: false, //鼠标移入变大
type: 'pie',
label: {
normal: {
show: false,
formatter: '{c}%',
},
emphasis: {
show: false,
},
},
data: this.chartData,
},
{
name: '内边框',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['50%', '50%'],
radius: ['45%', '47%'],
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: ['63%', '65%'],
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
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
显示代码 复制代码 复制代码