<template>
	<div class="gaugeView">
		<scEcharts ref="c1" :option="option"></scEcharts>
	</div>
</template>

<script>
import scEcharts from '@/components/scEcharts';
export default {
	name: "progressBox",
	components:{
		scEcharts
	},
	props:{
		proObj:{
			type:Object,
		},
	},
	watch:{
		proObj:{
			deep:true,
			immediate:true,
			handler(val){
				let option = this.$TOOL.objCopy(this.option);
				option.series[0].data[0].value = val.value;
				option.series[0].data[0].name = val.title;
				this.option = option;
			}
		}
	},
	data(){
		return{
			option:{
				series: [
					{
						type: 'gauge',
						startAngle: 90,
						endAngle: -270,
						radius: '80%',
						pointer: {
							show: false
						},
						progress: {
							show: true,
							overlap: false,
							roundCap: true,
							clip: false,
							itemStyle: {
								borderWidth: 12,
							}
						},
						axisLine: {
							show:true,
							lineStyle: {
								width: 12,
							}
						},
						splitLine: {
							show: false,
							distance: 0,
							length: 10
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false,
							distance: 50
						},
						itemStyle:{
							color:{
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: '#1367C1'
								}, {
									offset: 1,
									color: 'rgba(19,103,193,0.3)'
								}],
								global: false
							},
							shadowColor:'rgba(19,103,193,0.3)'
						},
						data: [
							{
								value: 0,
								name: '',
								title: {
									fontSize:12,
									offsetCenter: ['0%', '30%']
								},
								detail: {
									fontSize:30,
									valueAnimation: true,
									offsetCenter: ['0%', '-10%']
								}
							},
						],
						title: {
							fontSize: 14,
						},
						detail: {
							fontSize: 20,
							color: "#1367C1",
							borderColor: '#ddd',
							borderRadius: 10,
							borderWidth: 0,
							formatter: '{value}%'
						}
					}
				]
			},

		}
	},
	mounted() {

	},
	methods:{

	}
}
</script>

<style scoped lang="scss">
	.gaugeView{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
</style>
