echarts——环形图_echarts 环形图

const value_ze = 60
const value2_ze = 30
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
	title: {
		text: `目标完成率`,
		subtext: [`{a|${value_ze}}`, '{b|%}'].join(''),

		itemGap: 10,
		textStyle: {
			fontSize: '14',
			color: '#fff',
			fontWeight: 500
		},
		subtextStyle: {
			rich: {
				a: {
					fontSize: '32',
					color: '#fff',
					fontWeight: 500,
					fontFamily: "numStyle"
				},
				b: {
					fontSize: '14',
					color: '#fff',
					padding: [8, 0, 0, 6]
				},
			}
		},
		left: 'center',
		top: '35%',
	},
	grid: {
		top: '0%',
		left: '0%',
		right: '0%',
		bottom: '0%',
		containLabel: true
	},
	visualMap: {
		show: false,
	},
	series: [
		{
			name: '',
			type: 'pie',
			radius: ['94%', '96%'],
			center: ['50%', '50%'],
			itemStyle: {
				label: {
					show: false,
				},
			},
			hoverAnimation: false,
			data: [
				{
					value: 100,
					label: {
						show: false,
					},
					itemStyle: {
						normal: {
							color: "#0b5d75"
						}
					},
				}
			],
		},

		{
			type: 'pie',
			radius: ['76%', '86%'],
			center: ['50%', '50%'],
			data: [
				{
					value: value_ze,
					itemStyle: {
						normal: {
							color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
								{
									offset: 0.25,
									color: '#00dddd' // 0% 处的颜色
								},
								{
									offset: 0.5,
									color: '#2491ff' // 0% 处的颜色
								},
								{
									offset: 0.75,
									color: '#00b7ff' // 0% 处的颜色
								},
								{
									offset: 1,
									color: '#fff' // 100% 处的颜色
								}
							])
						}
					},
				},
				{ value: value2_ze, itemStyle: { color: 'rgba(34, 145, 255, 0.3)' } },
			],

			label: {
				//将视觉引导图关闭
				show: false,
			},
			// 初始化echarts的动画效果
			animationType: 'scale',
			animationEasing: 'elasticOut',
			animationDelay: function (idx) {
				return Math.random() * 200;
			}
		}
	]
};
myChart.setOption(option);
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