echarts圆环+仪表盘

  先上效果图

 全部代码如下：

option = {
	grid: {
		show: true,
		backgroundColor: '#0A3C74',
	},
	tooltip: {
		trigger: 'item'
	},
	series: [{
			name: '',
			type: 'pie',
			z: 9,
			hoverAnimation: false,
			radius: ['60%', '50%'],
			avoidLabelOverlap: false,
			tooltip: {
				show: false
			},
			label: {
				show: true,
				position: 'center',
				formatter: function() {
					return "{name|" + 50 + "   件}" + "\n" + "{unit|完成100%}"
				},
				textStyle: {
					rich: {
						name: {
							fontSize: 68,
							color: "#ffffff",
							fontWeight: 'bold',
						},
						unit: {
							fontSize: 35,
							marginTop: 10,
							lineHeight: 36,
							color: '#ffffff'
						}
					}
				},
			},
			emphasis: {
				focus: false,
				label: {
					show: true,
					fontSize: 40,
					fontWeight: 'bold'
				}
			},
			itemStyle: {
				borderRadius: 1000,
			},

			labelLine: {
				show: false
			},
			data: [{
					value: 1508,
					name: 'Search Engine',
					itemStyle: {
						normal: {
							color: {
								type: 'linear',
								x: 0.8878397555248063,
								x2: 0.11216024447519368,
								y: 0.9,
								y2: 1,
								colorStops: [
									// 0%处的颜色
									{
										offset: 0,
										color: 'yellow',
									},

									// 100%处的颜色
									{
										offset: 1,
										color: '#204D80',
									},
								],
								global: false // 缺省为 false
							},
							borderWidth: 0, //设置边框粗细
							borderColor: 'rgb(9,37,71, 0.5)' //边框颜色
						}
					}
				},
				{
					z: 0,
					value: 608,
					name: 'Direct',
					itemStyle: {
						normal: {
							color: {
								type: 'linear',
								x: 0.11216024447519374,
								x2: 0.8878397555248063,
								y: 1,
								y2: 0,
								colorStops: [
									// 0%处的颜色
									{
										offset: 0,
										color: '#204D80',
									},

									// 100%处的颜色
									{
										offset: 1,
										color: '#204D80',
									},
								],
								global: false // 缺省为 false
							}
						}
					}
				},
			]
		},
		{
			type: 'gauge',
			radius: '60%',
			startAngle: 90,
			endAngle: -270,
			z: 6,
			pointer: {
				show: false
			},
			progress: {
				show: true,
				overlap: false,
				roundCap: true,
				clip: false,
				itemStyle: {
					borderWidth: 0,
					color: '#204D80',
				}
			},

			axisLine: {
				lineStyle: {
					width: 40,
				}
			},
			splitLine: {
				show: false,
			},
			axisTick: {
				show: true,
				lineStyle: {
					color: '#eee'
				}
			},
			tooltip: {
				show: false
			},
			axisLabel: {
				show: false,
				distance: 0
			},
			data: [{
				value: 100,
				name: '',
				title: {
					show: false,
				},
				detail: {
					show: false,
				}
			}],
		},
		{
			name: '',
			type: 'pie',
			z: 11,
			hoverAnimation: false,
			radius: ['60%', '50%'],
			avoidLabelOverlap: false,
			tooltip: {
				show: false
			},
			label: {
				show: true,
				position: 'center',
				formatter: function() {
					return "{name|" + 50 + "   件}" + "\n" + "{unit|完成100%}"
				},
				textStyle: {
					rich: {
						name: {
							fontSize: 68,
							color: "#ffffff",
							fontWeight: 'bold',
						},
						unit: {
							fontSize: 35,
							marginTop: 10,
							lineHeight: 36,
							color: '#ffffff'
						}
					}
				},
			},
			emphasis: {
				focus: false,
				label: {
					show: true,
					fontSize: 40,
					fontWeight: 'bold'
				}
			},
			itemStyle: {
				borderRadius: 0,
			},

			labelLine: {
				show: false
			},
			data: [{
					value: 1508,
					name: 'Search Engine',
					itemStyle: {
						normal: {
							color: "rgba(200,200,200,0)",
							borderWidth: 0, //设置边框粗细
							borderColor: 'rgb(9,37,71, 0.5)' //边框颜色
						}
					}
				},
				{
					value: 658,
					name: 'Direct',
					itemStyle: {
						normal: {
							color: '#204D80'
						}
					}
				},
			]
		}
	]
};