<template>
	<div class="mainFirst">
		<div id="main" style="width: 100%;height:500px;"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {

			}
		},
		mounted() {
			this.getMain();
		},
		methods: {
			getMain() {
				let chartDom = document.getElementById('main');
				let myChart = echarts.init(chartDom);
				let value = 65.23;
				let title = 'vision';
				let int = value.toFixed(2).split('.')[0];
				let float = value.toFixed(2).split('.')[1];
				let option = {
					backgroundColor: '#020f18',
					title: {
						text: '{a|' + int + '}{b|.' + float + '}\n{c|' + title + '}',
						x: 'center',
						y: 'center',
						textStyle: {
							rich: {
								a: {
									fontSize: 48,
									color: '#fff',
									fontWeight: '600',
								},
								b: {
									fontSize: 20,
									color: '#fff',
									padding: [0, 0, 14, 0]
								},
								c: {
									fontSize: 20,
									color: '#fff',
									padding: [5, 0]
								}
							}
						}
					},
					series: [{
							type: 'gauge',
							radius: '60%',
							clockwise: false,
							startAngle: '90',
							endAngle: '-269.9999',
							splitNumber: 30,
							detail: {
								offsetCenter: [0, -20],
								formatter: ' '
							},
							pointer: {
								show: false
							},
							axisLine: {
								show: true,
								lineStyle: {
									color: [
										[0, '#2CFAFC'],
										[36.7 / 100, '#0ff'],
										[1, '#0f232e']
									],
									width: 20
								}
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: true,
								length: 100,
								lineStyle: {
									shadowBlur: 10,
									shadowColor: 'rgba(0, 255, 255, 1)',
									shadowOffsetY: '0',
									color: '#020f18',
									width: 2
								}
							},
							axisLabel: {
								show: false
							}
						},
						{
							type: 'pie',
							radius: ['44%', '45%'],
							hoverAnimation: false,
							clockWise: false,
							itemStyle: {
								normal: {
									color: '#0C355E'
								}
							},
							label: {
								show: false
							},
							data: _dashed()
						},

						{
							type: 'pie',
							radius: [0, '30%'],
							hoverAnimation: false,
							clockWise: false,
							itemStyle: {
								normal: {
									shadowBlur: 20,
									shadowColor: '#000',
									color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
										offset: 0,
										color: '#0FF',
									}, {
										offset: 1,
										color: '#060f20'
									}])
								}
							},
							label: {
								show: false
							},
							data: [100]
						},
						{
							type: 'pie',
							radius: ['64%', '65.5%'],
							hoverAnimation: false,
							clockWise: false,
							itemStyle: {
								normal: {
									shadowBlur: 20,
									shadowColor: 'rgba(0, 255, 255,.3)',
									color: '#0f232e'
								}
							},
							label: {
								show: false
							},
							data: [100]
						},
						{
							type: 'pie',
							radius: ['68%', '69.5%'],
							hoverAnimation: false,
							clockWise: false,
							itemStyle: {
								normal: {
									shadowBlur: 20,
									shadowColor: 'rgba(0, 255, 255,.3)',
									color: 'rgba(15, 35, 46,.6)',
								}
							},
							label: {
								show: false
							},
							data: [100]
						},
					]
				};

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

					}
					return dataArr

				}

				function doing() {
					let option = myChart.getOption();
					option.series[1].startAngle = option.series[1].startAngle - 1;
					myChart.setOption(option);
				}

				function startTimer() {
					setInterval(doing, 100);
				}
				setTimeout(startTimer, 0);
				myChart.setOption(option);
			}
		}
	}
</script>

<style scoped>
	.mainFirst {
		display: flex;
		justify-content: space-between;
		padding: 0 20px 10px 20px;
	}
</style>