echarts 仪表盘参数

var dataArr = 44;
var colorSet = {
    
    
	color: 'rgba(238, 238, 238, 1)'
};

var color1 = {
    
    
	type: "linear",
	x: 0,
	y: 0,
	x2: 1,
	y2: 1,
	colorStops: [
		{
    
    
			offset: 0,
			color: "rgba(238, 238, 238, 1)"
		},
		{
    
    
			offset: 1,
			color: "rgba(238, 238, 238, 1)"
		}
	],
	global: false
}

var color2 = color2 = [
	[1 / 6, '#41D5A4'],
	[2 / 6, '#FBC436'],
	[3 / 6, '#FD9522'],
	[4 / 6, '#FA5F5D'],
	[5 / 6, '#B47BF7'],
	[1, '#C43458'],
]

option = {
    
    
	// backgroundColor: '#0E1327',
	backgroundColor: '#ffffff',
	tooltip: {
    
    
		show: false
	},

	series: [
		{
    
    
			name: "内部进度条",
			type: "gauge",
			// center: ['20%', '50%'],
			radius: '62%',

			splitNumber: 10,
			axisLine: {
    
    
				lineStyle: {
    
    
					color: [
						[0, colorSet.color],
						[1, colorSet.color]
					],
					width: 2
				}
			},
			axisLabel: {
    
    
				show: false,
			},
			axisTick: {
    
    
				show: false,

			},
			splitLine: {
    
    
				show: false,
			},
			itemStyle: {
    
    
				color: "rgba(234, 234, 234, 1)"
			},
			detail: {
    
    
				show: false,
				formatter: function (value) {
    
    
					if (value !== 0) {
    
    
						var num = Math.round(value);
						return parseInt(num).toFixed(0) + "%";
					} else {
    
    
						return 0;
					}
				},
				offsetCenter: [0, 67],
				textStyle: {
    
    
					padding: [0, 0, 0, 0],
					fontSize: 18,
					fontWeight: '700',
					color: '#ffffff'
				}
			},
			title: {
    
     //标题
				show: false,
				offsetCenter: [0, 46], // x, y，单位px
				textStyle: {
    
    
					color: "rgba(0,0,0,0)",
					fontSize: 14, //表盘上的标题文字大小
					fontFamily: 'PingFangSC'
				}
			},
			data: [{
    
    
				name: "",
				value: dataArr,
			}],
			pointer: {
    
    
				show: true,
				length: '70%',
				radius: '20%',
				width: 3 //指针粗细

			},
			animationDuration: 4000,
		},
		{
    
    
			name: "内部小圆",
			type: "gauge",
			// center: ['20%', '50%'],
			radius: '56%',

			splitNumber: 30,
			axisLine: {
    
    
				lineStyle: {
    
    
					color: color2,
					width: 30
				}
			},
			axisLabel: {
    
    
				show: false,
			},
			axisTick: {
    
    
				show: false,

			},
			splitLine: {
    
    
				show: false,
			},
			itemStyle: {
    
    
				show: false,
			},
		},
		{
    
    
			name: '外部刻度',
			type: 'gauge',
			//  center: ['20%', '50%'],
			radius: '40%',
			min: 0, //最小刻度
			max: 100, //最大刻度
			splitNumber: 5, //刻度数量
			startAngle: 225,
			endAngle: -45,
			axisLine: {
    
    
				show: false,
			}, //仪表盘轴线
			axisLabel: {
    
    
				show: false,
			}, //刻度标签。
			axisTick: {
    
    
				show: true,
				splitNumber: 3,
				lineStyle: {
    
    
					color: color1, //用颜色渐变函数不起作用
					width: 1,
				},
				length: -6
			}, //刻度样式
			splitLine: {
    
    
				show: true,
				length: -12,
				lineStyle: {
    
    
					color: color1, //用颜色渐变函数不起作用
				}
			}, //分隔线样式
			detail: {
    
    
				show: false
			}
		},
		{
    
     //指针上的圆
			type: 'pie',
			tooltip: {
    
    
				show: false
			},
			hoverAnimation: false,
			legendHoverLink: false,
			radius: ['0%', '10%'],
			center: ['50%', '50%'],
			label: {
    
    
				normal: {
    
    
					show: false
				}
			},
			labelLine: {
    
    
				normal: {
    
    
					show: false
				}
			},
			data: [{
    
    
				value: 120,
				itemStyle: {
    
    
					normal: {
    
    
						color: "rgba(238, 238, 238, 1)",
					},
				}
			}]
		},
		{
    
    
			name: "内部进度条",
			type: "gauge",
			// center: ['20%', '50%'],
			radius: '40%',

			splitNumber: 10,
			axisLine: {
    
    
				lineStyle: {
    
    
					color: [
						[dataArr / 100, colorSet.color],
						[1, colorSet.color]
					],
					width: 1
				}
			},
			axisLabel: {
    
    
				show: false,
			},
			axisTick: {
    
    
				show: false,

			},
			splitLine: {
    
    
				show: false,
			},
			itemStyle: {
    
    
				color: "#ffffff"
			},
			detail: {
    
    
				formatter: function (value) {
    
    
					return 'AQI'
				},
				offsetCenter: [0, 200],
				textStyle: {
    
    
					padding: [0, 0, 0, 0],
					fontSize: 32,
					color: "#B6B6B6"
				}
			},
			title: {
    
     //标题
				show: true,
				offsetCenter: [0, 140], // x, y，单位px
				textStyle: {
    
    
					color: "#404040",
					fontSize: 66, //表盘上的标题文字大小
					fontWeight: 500,
					fontFamily: 'MicrosoftYaHei'
				}
			},
			data: [{
    
    
				name: dataArr,
				value: dataArr,
				itemStyle: {
    
    
					color: "rgba(174, 174, 174, 1)",
					fontFamily: "MicrosoftYaHei",
					fontSize: 14
				}
			}],
			pointer: {
    
    
				show: true,
				length: '80%',
				radius: '20%',
				width: 4 //指针粗细

			},
			animationDuration: 4000,
		}
	]
};