仪表盘-指标echarts gauge配置项内容和展示

外盘设置指标值及其颜色,内盘显示完成率。

配置项如下
      option = {
    backgroundColor: '#00264d',
    tooltip : {
		formatter: "{a} <br/>{b} : {c}%"
	},
	toolbox: {
		feature: {
			restore: {},
			saveAsImage: {}
		}
	},
	series: [
		{
			type: 'gauge',
			name: '业务指标',
			radius:'100%',
			startAngle:'195',
			endAngle:'-15',
			splitNumber:'50',
			pointer:{
				show:false
			},
			detail: {
				show : false,
				offsetCenter:[0,-20],
				formatter:'{value}%'
			},
			data: [{value: 60, name: '完成率'}],
			title: {
				show: true,
				offsetCenter: [0, '20px'],<!-- 【完成率】偏离中心的距离[左右,上下] -->
				textStyle: {
					color: '#fff',
					fontStyle: 'normal',
					fontWeight: 'normal',
					fontFamily: '微软雅黑',
					fontSize: 16
				}
			},
			axisLine:{
				show: true,
				lineStyle: {
					color:[[0.7, '#D14352'], [0.9, '#F6BB41'], [1, '#00FF00']],
					width: 10,
					shadowBlur: 0,
					shadowColor: '',
					shadowOffsetX: 0,
					shadowOffsetY: 0,
					opacity: 1
				}
			},
			axisTick: {
				show: false
			},
			splitLine: {
				show: true,
				length:10,
				lineStyle: {
					color: '#00377a',
					width: 2,
					type: 'solid',
					shadowColor: '#00377a',
					shadowBlur: 10,
					shadowOffsetX: 10,
					shadowOffsetY: 10,
					opacity: 0.5
				},
			},
			axisLabel: {
				show: false
			}
		},{
			type: 'gauge',
			name: '业务指标',
			radius:'90%',
			startAngle:'195',
			endAngle:'-15',
			splitNumber:'50',
			pointer:{
				show:false
			},
			detail: {
			offsetCenter:[0,-20],
			formatter:'{value}%'
			},
			data: [{value: 95, name: '完成率'}],
			title: [{
				show: true,
				offsetCenter: [0, '20px'],<!-- 【完成率】偏离中心的距离[左右,上下] -->
				textStyle: {
					color: '#fff',
					fontStyle: 'normal',
					fontWeight: 'normal',
					fontFamily: '微软雅黑',
					fontSize: 16
				}
			},{
				show: true,
				offsetCenter: [0, '40px'],<!-- 【完成率】偏离中心的距离[左右,上下] -->
				textStyle: {
					color: '#fff',
					fontStyle: 'normal',
					fontWeight: 'normal',
					fontFamily: '微软雅黑',
					fontSize: 16
				}
			}],
			axisLine:{
				show: true,
				lineStyle: {
					color:[[0, '#00ff00'], [0.95, '#00ff00'], [1, '#002c5d']],
					width: 25,
					shadowBlur: 15,
					shadowColor: '#00ff00',
					shadowOffsetX: 0,
					shadowOffsetY: 0,
					opacity: 1
				}
			},
			axisTick: {
				show: false
			},
			splitLine: {
				show: true,
				length:25,
				lineStyle: {
					color: '#00377a',
					width: 2,
					type: 'solid',
					shadowColor: '#00377a',
					shadowBlur: 25,
					shadowOffsetX: 10,
					shadowOffsetY: 10,
					opacity: 0.5
				},
			},
			axisLabel: {
				show: false
			}
		}
	]
};
    
截图如下