var myChart_xltj, myChart_xlfx, myChart_xlzs1, myChart_grxlda1, myChart_grxlda2, myChart_grxlda3;

layui.use('laydate', function () {
	var laydate = layui.laydate;
	//年月选择器
	laydate.render({
		elem: '#test3',
		type: 'month'
	});
});

$(document).ready(function () {
	myChart_xltj = echarts.init(document.getElementById('xltj'));
	myChart_xlfx = echarts.init(document.getElementById('xlfx'));
	myChart_xlzs1 = echarts.init(document.getElementById('xlzs1'));
	myChart_xlzs2 = echarts.init(document.getElementById('xlzs2'));
	myChart_grxlda1 = echarts.init(document.getElementById('grxlda1'));
	myChart_grxlda2 = echarts.init(document.getElementById('grxlda2'));
	myChart_grxlda3 = echarts.init(document.getElementById('grxlda3'));
	//训练统计
	countXLTJ();
	//训练分析
	countXLFX();
	//训练走势
	countXLZS();
	countXLZS2();
	//训练
	countXL1();
	//训练
	countXL2();
	//训练
	countXL3();
	window.onresize = function () {
		myChart_xltj.resize();
		myChart_xlfx.resize();
		myChart_xlzs1.resize();
		myChart_xlzs2.resize();
		myChart_grxlda1.resize();
		myChart_grxlda2.resize();
		myChart_grxlda3.resize();
	}
 
});

//训练科目人数
function countXLKM() {

}
//训练统计
function countXLTJ() {
	// 基于准备好的dom，初始化echarts实例
	//var myChart = echarts.init(document.getElementById('xltj'));
	const CubeLeft = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0
		},
		buildPath: function (ctx, shape) {
			const xAxisPoint = shape.xAxisPoint
			const c0 = [shape.x, shape.y]
			const c1 = [shape.x - 6, shape.y - 6]
			const c2 = [xAxisPoint[0] - 6, xAxisPoint[1] - 6]
			const c3 = [xAxisPoint[0], xAxisPoint[1]]
			ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
		}
	})
	const CubeRight = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0
		},
		buildPath: function (ctx, shape) {
			const xAxisPoint = shape.xAxisPoint
			const c1 = [shape.x, shape.y]
			const c2 = [xAxisPoint[0], xAxisPoint[1]]
			const c3 = [xAxisPoint[0] + 12, xAxisPoint[1] - 6]
			const c4 = [shape.x + 12, shape.y - 6]
			ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
		}
	})
	const CubeTop = echarts.graphic.extendShape({
		shape: {
			x: 0,
			y: 0
		},
		buildPath: function (ctx, shape) {
			const c1 = [shape.x, shape.y]
			const c2 = [shape.x + 12, shape.y - 6]
			const c3 = [shape.x + 6, shape.y - 12]
			const c4 = [shape.x - 6, shape.y - 6]
			ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
		}
	})
	echarts.graphic.registerShape('CubeLeft', CubeLeft)
	echarts.graphic.registerShape('CubeRight', CubeRight)
	echarts.graphic.registerShape('CubeTop', CubeTop)
	const VALUE = [15, 17, 20, 25, 14, 17, 22, 16, 15]
	option = {
		title: {
			text: '',
			top: 32,
			left: 18,
			textStyle: {
				color: '#00F6FF',
				fontSize: 24
			}
		},
		grid: {
			left: 20,
			right: 40,
			bottom: '5%',
			top: '10%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: ['跳绳', '3公里（1.5公里）', '屈腿仰卧起坐', '俯卧撑', '单杠卷身上', '2分钟双杠臂屈伸',
				'搬运重物折返跑', '搬运重物折返跑', '400米救人疏散物资'
			],
			axisLine: {
				show: true,
				lineStyle: {
					color: '#19568e'
				}
			},
			offset: 10,
			axisTick: {
				show: false,
				length: 6,
				alignWithLabel: true,
				lineStyle: {
					color: '#19568e'
				}
			},
			axisLabel: {
				fontSize: 14,
				rotate: 40,
				color: '#d6f4ff'
			}
		},
		yAxis: {
			type: 'value',
			name: '单位（次）',
			nameTextStyle: {
				color: "#d6f4ff",
				padding: [0, 0, 0, 0],
				fontSize: 14,
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: '#19568e'
				}
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				fontSize: 14,
				color: '#d6f4ff'
			},
			boundaryGap: ['20%', '20%']
		},
		series: [{
			type: 'custom',
			renderItem: (params, api) => {
				const location = api.coord([api.value(0), api.value(1)])
				return {
					type: 'group',
					children: [{
						type: 'CubeLeft',
						shape: {
							api,
							xValue: api.value(0),
							yValue: api.value(1),
							x: location[0],
							y: location[1],
							xAxisPoint: api.coord([api.value(0), 0])
						},
						style: {
							fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#3B80E2'
							},
							{
								offset: 1,
								color: '#2eeeff'
							}
							])
						}
					}, {
						type: 'CubeRight',
						shape: {
							api,
							xValue: api.value(0),
							yValue: api.value(1),
							x: location[0],
							y: location[1],
							xAxisPoint: api.coord([api.value(0), 0])
						},
						style: {
							fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#3B80E2'
							},
							{
								offset: 1,
								color: '#2eeeff'
							}
							])
						}
					}, {
						type: 'CubeTop',
						shape: {
							api,
							xValue: api.value(0),
							yValue: api.value(1),
							x: location[0],
							y: location[1],
							xAxisPoint: api.coord([api.value(0), 0])
						},
						style: {
							fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#3B80E2'
							},
							{
								offset: 1,
								color: '#2eeeff'
							}
							])
						}
					}]
				}
			},
			data: VALUE
		}]
	}
	// 使用刚指定的配置项和数据显示图表。
	myChart_xltj.setOption(option);
	
 
}
//训练分析
function countXLFX() {
	// 基于准备好的dom，初始化echarts实例
	
	var data = {
		city: ["巴楚大队", "英吉沙大队", "泽普大队", "莎车大队", "喀什支队", "喀什市大队", "岳普湖大队", "喀什地区支队", "疏勒大队", "疏附大队", "麦盖提大队", "伽师大队",
			"叶城大队"
		],
		num: ["73.64", "77.86", "96.67", "66.88", "89", "72.11", "60", "89.17", "4.43", "73", "71.67", "57.5",
			"81.67", "57.22"
		]
	}
	option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0,
							color: 'rgba(255,255,255,0)' // 0% 处的颜色
						}, {
							offset: 0.5,
							color: 'rgba(255,255,255,1)' // 100% 处的颜色
						}, {
							offset: 1,
							color: 'rgba(255,255,255,0)' // 100% 处的颜色
						}],
						global: false // 缺省为 false
					}
				},
			},

		},
		grid: {
			top: '18%',
			left: '10%',
			right: '5%',
			bottom: '10%',
			// containLabel: true
		},
		xAxis: [{
			type: 'category',
			boundaryGap: true,
			axisLine: { //坐标轴轴线相关设置。数学上的x轴
				show: true,
				lineStyle: {
					color: '#19568e'
				},
			},
			axisLabel: { //坐标轴刻度标签的相关设置
				textStyle: {
					color: '#d6f4ff',
					margin: 15,
				},
				formatter: function (data) {
					return data
				}
			},
			axisTick: {
				show: false,
			},
			data: data.city
		}],
		yAxis: [{
			min: 0,
			max: 100,
			splitLine: {
				show: true,
				lineStyle: {
					color: '#19568e'
				},
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#19568e"
				}

			},
			axisLabel: {
				show: true,
				textStyle: {
					color: '#d6f4ff',

				},
				formatter: function (value) {
					if (value === 0) {
						return value
					}
					return value + '%'
				}
			},
			axisTick: {
				show: false,
			},
		}],
		series: [{
			name: '平均成绩',
			type: 'line',
			symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
			showAllSymbol: true,
			symbolSize: 8,
			lineStyle: {
				normal: {
					color: "#00d9f9", // 线条颜色
				},
				borderColor: 'rgba(0,0,0,.4)',
			},
			itemStyle: {
				color: "rgba(14,30,73,1)",
				borderColor: "#00d9f9",
				borderWidth: 2

			},
			label: {
				normal: {
					show: true,
					position: "top",
					formatter: [
						' {a|{c}%}',
					].join(','),
					rich: {
						a: {
							color: '#fff',
							align: 'center',
						},
					}
				}
			},
			tooltip: {
				show: true
			},
			areaStyle: { //区域填充样式
				normal: {
					//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: "rgba(0, 217, 249,.3)"


					},
					{
						offset: 1,
						color: "rgba(10, 217, 249, 0)"
					}
					], false),
					shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
					shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
				}
			},
			data: data.num
		}]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart_xlfx.setOption(option);
 
}
//训练走势
function countXLZS() {
	// 基于准备好的dom，初始化echarts实例
	var getname = ['3-12', '3-11', '3-10', '3-09', '3-08', '3-07', '3-06'];
	var getvalue = [23, 18, 15, 22, 14, 17, 22];
	var getdata = [29, 23, 18, 26, 17, 22, 27];


	option = {
		legend: {
			show: true,
			right: 14,
			top: 2,
			itemWidth: 14,
			itemHeight: 4,
			textStyle: {
				color: '#d6f4ff',
				fontSize: 14
			},
			data: ['单杠卷身上', '分钟双杠臂屈伸']
		},
		grid: {
			top: '20%',
			right: '5%',
			left: '10%',
			bottom: '15%'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'none'
			},
			formatter: function (params) {
				return '' + params[0].name + '：<br>' + params[0].seriesName + '：' + params[0].value + '<br>' + params[1]
					.seriesName + '：' + params[1].value
			}
		},
		xAxis: [{
			data: getname,
			axisLabel: {
				interval: 0,
				margin: 10,
				color: '#d6f4ffs',
				textStyle: {
					fontSize: 14
				},
			},
			axisLine: {
				lineStyle: {
					color: '#19568e',
				}
			},
			axisTick: {
				show: false
			},
		}],
		yAxis: [{
			type: 'value',
			name: '单位（个）',
			nameTextStyle: {
				color: "#d6f4ff",
				padding: [0, 0, 0, 0],
				fontSize: 14,
			},
			max: 30,
			min: 0,
			splitNumber: 3,
			axisLabel: {
				color: '#d6f4ff',
				textStyle: {
					fontSize: 14
				},
			},
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			splitLine: {
				lineStyle: {
					color: '#19568e',
					type: 'dashed'
				}
			}
		}],
		animation: false,
		series: [{
			name: '单杠卷身上',
			type: 'bar',
			data: getvalue,
			barWidth: '12px',
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: '#f2c409' // 0% 处的颜色
					}, {
						offset: 1,
						color: '#f5804d' // 100% 处的颜色
					}], false),
					barBorderRadius: [6, 6, 0, 0],
				}
			},
		}, {
			name: '分钟双杠臂屈伸',
			type: 'bar',
			data: getdata,
			barWidth: '12px',
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: '#26ffe8' // 0% 处的颜色
					}, {
						offset: 1,
						color: '#4dcbf5' // 100% 处的颜色
					}], false),
					barBorderRadius: [6, 6, 0, 0],
				}
			},
		}]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart_xlzs1.setOption(option);
}
function countXLZS2() {
	// 基于准备好的dom，初始化echarts实例
	 
	var obj = {
		data1: [25, 49, 31, 34, 23, 26, 22],
		data2: [99, 80, 110, 101, 91, 78, 102],
		data3: [111, 143, 124, 122, 148, 106, 116],
		time: ['3-12', '3-11', '3-10', '3-09', '3-08', '3-07', '3-06']
	}
	option = {
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			data: ['搬运重物折返跑', '负重登10楼', '400米救人疏散物资'],
			textStyle: {
				color: '#d6f4ff',
				fontSize: '14'
			},
			right: 14,
			top: 2,
			itemWidth: 14,
			itemHeight: 5,
			itemGrap: 0
		},
		color: ['#f3b01d', '#37e9ee', '#006fff'],
		grid: {
			left: '6%',
			right: '5%',
			bottom: '3%',
			top: '30',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: obj.time,
			axisLine: {
				lineStyle: {
					color: '#19568e'
				}
			},
			axisLabel: {
				formatter: '{value}',
				textStyle: {
					color: '#d6f4ff',
					fontSize: '14'
				}
			},
			axisTick: {
				show: false,
			}
		},
		yAxis: {
			type: 'value',
			max: 150,
			min: 0,
			splitNumber: 3,
			name: '单位（s）',
			nameTextStyle: {
				color: "#d6f4ff",
				padding: [0, 0, 0, 0],
				fontSize: 14,
			},
			axisLine: {
				lineStyle: {
					color: '#19568e'
				}
			},
			axisLabel: {
				formatter: '{value}',
				textStyle: {
					color: '#d6f4ff',
					fontSize: '14'
				}
			},
			axisTick: {
				show: false,
			},
			splitLine: {
				show: false
			}
		},
		series: [{
			name: '搬运重物折返跑',
			type: 'line',
			symbol: 'circle',
			data: obj.data1
		},
		{
			name: '负重登10楼',
			type: 'line',
			symbol: 'circle',
			data: obj.data2
		},
		{
			name: '400米救人疏散物资',
			type: 'line',
			symbol: 'circle',
			data: obj.data3
		}
		]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart_xlzs2.setOption(option);
}
function countXL1() {
	// 基于准备好的dom，初始化echarts实例
	
	var labelData = [];
	var labelData1 = [];
	for (var i = 0; i < 80; ++i) {
		labelData.push({
			value: 1,
			name: i,
			itemStyle: {
				normal: {
					color: 'rgba(0,209,228,0)',
				}
			}
		});
	}
	for (var i = 0; i < labelData.length; ++i) {
		if (labelData[i].name < 15) {
			labelData[i].itemStyle = {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0, 1, 0, 0,
						[{
							offset: 0,
							color: '#6dfbff'
						},
						{
							offset: 1,
							color: '#02aeff'
						}
						]
					)
				},

			}
		}
	}
	for (var i = 0; i < 80; ++i) {
		labelData1.push({
			value: 1,
			name: i,
			itemStyle: {
				normal: {
					color: 'rgba(0,209,228,0)',
				}
			}
		});
	}
	for (var i = 0; i < labelData1.length; ++i) {
		if (labelData1[i].name < 80) {
			labelData1[i].itemStyle = {
				normal: {
					color: '#464451',
				},

			}
		}
	}

	function Pie() {
		var dataArr = [];
		for (var i = 0; i < 100; i++) {
			if (i % 10 === 0) {
				dataArr.push({
					name: (i + 1).toString(),
					value: 30,
					itemStyle: {
						normal: {
							color: "rgba(0,255,255,1)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)",
						}
					}
				})
			} else {
				dataArr.push({
					name: (i + 1).toString(),
					value: 100,
					itemStyle: {
						normal: {
							color: "rgba(0,0,0,0)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			}
		}
		return dataArr
	}

	function Pie1() {
		var dataArr = [];
		for (var i = 0; i < 100; i++) {
			if (i % 5 === 0) {
				dataArr.push({
					name: (i + 1).toString(),
					value: 20,
					itemStyle: {
						normal: {
							color: "rgba(0,255,255,1)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			} else {
				dataArr.push({
					name: (i + 1).toString(),
					value: 100,
					itemStyle: {
						normal: {
							color: "rgba(0,0,0,0)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			}
		}
		return dataArr
	}

	function Pie2() {
		var dataArr = [];
		for (var i = 0; i < 100; i++) {
			if (i % 5 === 0) {
				dataArr.push({
					name: (i + 1).toString(),
					value: 20,
					itemStyle: {
						normal: {
							color: "rgba(0,255,255,.3)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			} else {
				dataArr.push({
					name: (i + 1).toString(),
					value: 100,
					itemStyle: {
						normal: {
							color: "rgba(0,0,0,0)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			}
		}
		return dataArr
	}

	function Pie3() {
		var dataArr = [];
		for (var i = 0; i < 100; i++) {
			if (i % 10 === 0) {
				dataArr.push({
					name: (i + 1).toString(),
					value: 30,
					itemStyle: {
						normal: {
							color: "rgba(0,255,255,.5)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			} else {
				dataArr.push({
					name: (i + 1).toString(),
					value: 100,
					itemStyle: {
						normal: {
							color: "rgba(0,0,0,0)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			}
		}
		return dataArr
	}
	option = {
		title: [{
			text: '99.375',
			x: '48%',
			y: '42%',
			textAlign: 'center',
			textStyle: {
				fontSize: 24,
				fontWeight: 800,
				color: '#01ffea',
				textAlign: 'center',
			},
		}, {
			text: '平均分',
			left: '43%',
			top: '52%',
			textStyle: {
				fontSize: 14,
				fontWeight: '400',
				color: '#dafefe',
				textAlign: 'left', //right


			},
		}, {
			text: '3公里（1.5公里）',
			left: '50%',
			top: '87%',
			textAlign: 'center',
			textStyle: {
				fontSize: '16',
				fontWeight: '400',
				color: '#00c0ff',
				textAlign: 'center',
			},
		}],
		polar: {
			radius: ['47%', '42%'],
			center: ['50%', '50%'],
		},
		angleAxis: {
			max: 100,
			show: false,
			startAngle: 0,
		},
		radiusAxis: {
			type: 'category',
			show: true,
			axisLabel: {
				show: false,
			},
			axisLine: {
				show: false,

			},
			axisTick: {
				show: false
			},
		},
		series: [
			//里第二圈
			{
				name: '',
				type: 'bar',
				roundCap: true, //圆角
				barWidth: 38,
				showBackground: true,
				backgroundStyle: {
					color: '#464451',
				},
				data: [75],
				coordinateSystem: 'polar',
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
							offset: 0,
							color: '#0ff'
						}, {
							offset: 1,
							color: '#02aeff'
						}]),
					}
				}
			},
			//齿轮蓝圈
			{
				hoverAnimation: false,
				name: 'bb',
				type: 'pie',
				z: 2,
				data: labelData,
				radius: ['50%', '60%'],
				center: ['50%', '50%'],
				zlevel: -2,
				itemStyle: {
					normal: {
						borderColor: '#222222',
						borderWidth: 1,
					}
				},
				label: {
					normal: {
						position: 'inside',
						show: false,
					}
				},
			},
			//齿轮灰圈
			{
				hoverAnimation: false,
				type: 'pie',
				z: 1,
				data: labelData1,
				radius: ['50%', '60%'],
				center: ['50%', '50%'],
				zlevel: -2,
				itemStyle: {
					normal: {
						borderColor: '#222222',
						borderWidth: 1,
					}
				},
				label: {
					normal: {
						position: 'inside',
						show: false,
					}
				},
			},
			//最里圈
			{
				type: 'pie',
				radius: ['38%', '37%'],
				center: ['50%', '50%'],
				data: [{
					hoverOffset: 1,
					value: 100,
					name: '',
					itemStyle: {
						color: '#ff6189',
					},
					label: {
						show: false
					},
					labelLine: {
						normal: {
							smooth: true,
							lineStyle: {
								width: 0
							}
						}
					},
					hoverAnimation: false,
				},
				{
					label: {
						show: false
					},
					labelLine: {
						normal: {
							smooth: true,
							lineStyle: {
								width: 0
							}
						}
					},
					value: 100 - 75,
					hoverAnimation: false,
					itemStyle: {
						color: '#3c3a48',
					},
				}
				]
			},
			//外圈装饰
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				radius: ['65%', '63.5%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie()
			},
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				startAngle: -150,
				radius: ['63.5%', '62%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie3()
			},
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				startAngle: -140,
				radius: ['65%', '63.5%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie()
			},
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				radius: ['63%', '61.5%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie1()
			},
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				startAngle: -140,
				radius: ['63%', '61.5%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie2()
			},
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				startAngle: -147.5,
				radius: ['63%', '61.5%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie2()
			},

		]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart_grxlda1.setOption(option);
}
function countXL2() {
	// 基于准备好的dom，初始化echarts实例
	
	var labelData = [];
	var labelData1 = [];
	for (var i = 0; i < 80; ++i) {
		labelData.push({
			value: 1,
			name: i,
			itemStyle: {
				normal: {
					color: 'rgba(0,209,228,0)',
				}
			}
		});
	}
	for (var i = 0; i < labelData.length; ++i) {
		if (labelData[i].name < 15) {
			labelData[i].itemStyle = {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0, 1, 0, 0,
						[{
							offset: 0,
							color: '#6dfbff'
						},
						{
							offset: 1,
							color: '#02aeff'
						}
						]
					)
				},

			}
		}
	}
	for (var i = 0; i < 80; ++i) {
		labelData1.push({
			value: 1,
			name: i,
			itemStyle: {
				normal: {
					color: 'rgba(0,209,228,0)',
				}
			}
		});
	}
	for (var i = 0; i < labelData1.length; ++i) {
		if (labelData1[i].name < 80) {
			labelData1[i].itemStyle = {
				normal: {
					color: '#464451',
				},

			}
		}
	}

	function Pie() {
		var dataArr = [];
		for (var i = 0; i < 100; i++) {
			if (i % 10 === 0) {
				dataArr.push({
					name: (i + 1).toString(),
					value: 30,
					itemStyle: {
						normal: {
							color: "rgba(0,255,255,1)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)",
						}
					}
				})
			} else {
				dataArr.push({
					name: (i + 1).toString(),
					value: 100,
					itemStyle: {
						normal: {
							color: "rgba(0,0,0,0)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			}
		}
		return dataArr
	}

	function Pie1() {
		var dataArr = [];
		for (var i = 0; i < 100; i++) {
			if (i % 5 === 0) {
				dataArr.push({
					name: (i + 1).toString(),
					value: 20,
					itemStyle: {
						normal: {
							color: "rgba(0,255,255,1)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			} else {
				dataArr.push({
					name: (i + 1).toString(),
					value: 100,
					itemStyle: {
						normal: {
							color: "rgba(0,0,0,0)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			}
		}
		return dataArr
	}

	function Pie2() {
		var dataArr = [];
		for (var i = 0; i < 100; i++) {
			if (i % 5 === 0) {
				dataArr.push({
					name: (i + 1).toString(),
					value: 20,
					itemStyle: {
						normal: {
							color: "rgba(0,255,255,.3)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			} else {
				dataArr.push({
					name: (i + 1).toString(),
					value: 100,
					itemStyle: {
						normal: {
							color: "rgba(0,0,0,0)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			}
		}
		return dataArr
	}

	function Pie3() {
		var dataArr = [];
		for (var i = 0; i < 100; i++) {
			if (i % 10 === 0) {
				dataArr.push({
					name: (i + 1).toString(),
					value: 30,
					itemStyle: {
						normal: {
							color: "rgba(0,255,255,.5)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			} else {
				dataArr.push({
					name: (i + 1).toString(),
					value: 100,
					itemStyle: {
						normal: {
							color: "rgba(0,0,0,0)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			}
		}
		return dataArr
	}
	option = {
		title: [{
			text: '99.375',
			x: '48%',
			y: '42%',
			textAlign: 'center',
			textStyle: {
				fontSize: 24,
				fontWeight: 800,
				color: '#01ffea',
				textAlign: 'center',
			},
		}, {
			text: '平均分',
			left: '43%',
			top: '52%',
			textStyle: {
				fontSize: 14,
				fontWeight: '400',
				color: '#dafefe',
				textAlign: 'left', //right


			},
		}, {
			text: '3公里（1.5公里）',
			left: '50%',
			top: '87%',
			textAlign: 'center',
			textStyle: {
				fontSize: '16',
				fontWeight: '400',
				color: '#00c0ff',
				textAlign: 'center',
			},
		}],
		polar: {
			radius: ['47%', '42%'],
			center: ['50%', '50%'],
		},
		angleAxis: {
			max: 100,
			show: false,
			startAngle: 0,
		},
		radiusAxis: {
			type: 'category',
			show: true,
			axisLabel: {
				show: false,
			},
			axisLine: {
				show: false,

			},
			axisTick: {
				show: false
			},
		},
		series: [
			//里第二圈
			{
				name: '',
				type: 'bar',
				roundCap: true, //圆角
				barWidth: 38,
				showBackground: true,
				backgroundStyle: {
					color: '#464451',
				},
				data: [75],
				coordinateSystem: 'polar',
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
							offset: 0,
							color: '#0ff'
						}, {
							offset: 1,
							color: '#02aeff'
						}]),
					}
				}
			},
			//齿轮蓝圈
			{
				hoverAnimation: false,
				name: 'bb',
				type: 'pie',
				z: 2,
				data: labelData,
				radius: ['50%', '60%'],
				center: ['50%', '50%'],
				zlevel: -2,
				itemStyle: {
					normal: {
						borderColor: '#222222',
						borderWidth: 1,
					}
				},
				label: {
					normal: {
						position: 'inside',
						show: false,
					}
				},
			},
			//齿轮灰圈
			{
				hoverAnimation: false,
				type: 'pie',
				z: 1,
				data: labelData1,
				radius: ['50%', '60%'],
				center: ['50%', '50%'],
				zlevel: -2,
				itemStyle: {
					normal: {
						borderColor: '#222222',
						borderWidth: 1,
					}
				},
				label: {
					normal: {
						position: 'inside',
						show: false,
					}
				},
			},
			//最里圈
			{
				type: 'pie',
				radius: ['38%', '37%'],
				center: ['50%', '50%'],
				data: [{
					hoverOffset: 1,
					value: 100,
					name: '',
					itemStyle: {
						color: '#ff6189',
					},
					label: {
						show: false
					},
					labelLine: {
						normal: {
							smooth: true,
							lineStyle: {
								width: 0
							}
						}
					},
					hoverAnimation: false,
				},
				{
					label: {
						show: false
					},
					labelLine: {
						normal: {
							smooth: true,
							lineStyle: {
								width: 0
							}
						}
					},
					value: 100 - 75,
					hoverAnimation: false,
					itemStyle: {
						color: '#3c3a48',
					},
				}
				]
			},
			//外圈装饰
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				radius: ['65%', '63.5%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie()
			},
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				startAngle: -150,
				radius: ['63.5%', '62%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie3()
			},
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				startAngle: -140,
				radius: ['65%', '63.5%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie()
			},
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				radius: ['63%', '61.5%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie1()
			},
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				startAngle: -140,
				radius: ['63%', '61.5%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie2()
			},
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				startAngle: -147.5,
				radius: ['63%', '61.5%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie2()
			},

		]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart_grxlda2.setOption(option); 
}


function countXL3() {
	// 基于准备好的dom，初始化echarts实例
	
	var labelData = [];
	var labelData1 = [];
	for (var i = 0; i < 80; ++i) {
		labelData.push({
			value: 1,
			name: i,
			itemStyle: {
				normal: {
					color: 'rgba(0,209,228,0)',
				}
			}
		});
	}
	for (var i = 0; i < labelData.length; ++i) {
		if (labelData[i].name < 15) {
			labelData[i].itemStyle = {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0, 1, 0, 0,
						[{
							offset: 0,
							color: '#6dfbff'
						},
						{
							offset: 1,
							color: '#02aeff'
						}
						]
					)
				},

			}
		}
	}
	for (var i = 0; i < 80; ++i) {
		labelData1.push({
			value: 1,
			name: i,
			itemStyle: {
				normal: {
					color: 'rgba(0,209,228,0)',
				}
			}
		});
	}
	for (var i = 0; i < labelData1.length; ++i) {
		if (labelData1[i].name < 80) {
			labelData1[i].itemStyle = {
				normal: {
					color: '#464451',
				},

			}
		}
	}

	function Pie() {
		var dataArr = [];
		for (var i = 0; i < 100; i++) {
			if (i % 10 === 0) {
				dataArr.push({
					name: (i + 1).toString(),
					value: 30,
					itemStyle: {
						normal: {
							color: "rgba(0,255,255,1)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)",
						}
					}
				})
			} else {
				dataArr.push({
					name: (i + 1).toString(),
					value: 100,
					itemStyle: {
						normal: {
							color: "rgba(0,0,0,0)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			}
		}
		return dataArr
	}

	function Pie1() {
		var dataArr = [];
		for (var i = 0; i < 100; i++) {
			if (i % 5 === 0) {
				dataArr.push({
					name: (i + 1).toString(),
					value: 20,
					itemStyle: {
						normal: {
							color: "rgba(0,255,255,1)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			} else {
				dataArr.push({
					name: (i + 1).toString(),
					value: 100,
					itemStyle: {
						normal: {
							color: "rgba(0,0,0,0)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			}
		}
		return dataArr
	}

	function Pie2() {
		var dataArr = [];
		for (var i = 0; i < 100; i++) {
			if (i % 5 === 0) {
				dataArr.push({
					name: (i + 1).toString(),
					value: 20,
					itemStyle: {
						normal: {
							color: "rgba(0,255,255,.3)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			} else {
				dataArr.push({
					name: (i + 1).toString(),
					value: 100,
					itemStyle: {
						normal: {
							color: "rgba(0,0,0,0)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			}
		}
		return dataArr
	}

	function Pie3() {
		var dataArr = [];
		for (var i = 0; i < 100; i++) {
			if (i % 10 === 0) {
				dataArr.push({
					name: (i + 1).toString(),
					value: 30,
					itemStyle: {
						normal: {
							color: "rgba(0,255,255,.5)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			} else {
				dataArr.push({
					name: (i + 1).toString(),
					value: 100,
					itemStyle: {
						normal: {
							color: "rgba(0,0,0,0)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			}
		}
		return dataArr
	}
	option = {
		title: [{
			text: '99.375',
			x: '48%',
			y: '42%',
			textAlign: 'center',
			textStyle: {
				fontSize: 24,
				fontWeight: 800,
				color: '#01ffea',
				textAlign: 'center',
			},
		}, {
			text: '平均分',
			left: '43%',
			top: '52%',
			textStyle: {
				fontSize: 14,
				fontWeight: '400',
				color: '#dafefe',
				textAlign: 'left', //right


			},
		}, {
			text: '3公里（1.5公里）',
			left: '50%',
			top: '87%',
			textAlign: 'center',
			textStyle: {
				fontSize: '16',
				fontWeight: '400',
				color: '#00c0ff',
				textAlign: 'center',
			},
		}],
		polar: {
			radius: ['47%', '42%'],
			center: ['50%', '50%'],
		},
		angleAxis: {
			max: 100,
			show: false,
			startAngle: 0,
		},
		radiusAxis: {
			type: 'category',
			show: true,
			axisLabel: {
				show: false,
			},
			axisLine: {
				show: false,

			},
			axisTick: {
				show: false
			},
		},
		series: [
			//里第二圈
			{
				name: '',
				type: 'bar',
				roundCap: true, //圆角
				barWidth: 38,
				showBackground: true,
				backgroundStyle: {
					color: '#464451',
				},
				data: [75],
				coordinateSystem: 'polar',
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
							offset: 0,
							color: '#0ff'
						}, {
							offset: 1,
							color: '#02aeff'
						}]),
					}
				}
			},
			//齿轮蓝圈
			{
				hoverAnimation: false,
				name: 'bb',
				type: 'pie',
				z: 2,
				data: labelData,
				radius: ['50%', '60%'],
				center: ['50%', '50%'],
				zlevel: -2,
				itemStyle: {
					normal: {
						borderColor: '#222222',
						borderWidth: 1,
					}
				},
				label: {
					normal: {
						position: 'inside',
						show: false,
					}
				},
			},
			//齿轮灰圈
			{
				hoverAnimation: false,
				type: 'pie',
				z: 1,
				data: labelData1,
				radius: ['50%', '60%'],
				center: ['50%', '50%'],
				zlevel: -2,
				itemStyle: {
					normal: {
						borderColor: '#222222',
						borderWidth: 1,
					}
				},
				label: {
					normal: {
						position: 'inside',
						show: false,
					}
				},
			},
			//最里圈
			{
				type: 'pie',
				radius: ['38%', '37%'],
				center: ['50%', '50%'],
				data: [{
					hoverOffset: 1,
					value: 100,
					name: '',
					itemStyle: {
						color: '#ff6189',
					},
					label: {
						show: false
					},
					labelLine: {
						normal: {
							smooth: true,
							lineStyle: {
								width: 0
							}
						}
					},
					hoverAnimation: false,
				},
				{
					label: {
						show: false
					},
					labelLine: {
						normal: {
							smooth: true,
							lineStyle: {
								width: 0
							}
						}
					},
					value: 100 - 75,
					hoverAnimation: false,
					itemStyle: {
						color: '#3c3a48',
					},
				}
				]
			},
			//外圈装饰
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				radius: ['65%', '63.5%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie()
			},
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				startAngle: -150,
				radius: ['63.5%', '62%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie3()
			},
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				startAngle: -140,
				radius: ['65%', '63.5%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie()
			},
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				radius: ['63%', '61.5%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie1()
			},
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				startAngle: -140,
				radius: ['63%', '61.5%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie2()
			},
			{
				type: 'pie',
				zlevel: 0,
				silent: true,
				startAngle: -147.5,
				radius: ['63%', '61.5%'],
				center: ['50%', '50%'],
				z: 1,
				label: {
					normal: {
						show: false
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: Pie2()
			},

		]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart_grxlda3.setOption(option);
}