echarts 仪表盘参数

Posted 2023-03-05 David凉宸

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,
		
	]
;