<template>
	<div :id="echid" class="gfChart"></div>
</template>

<script>
	import * as echarts from "echarts";
	export default {
		props: ["datas"],
		watch: {
			datas: {
				handler(val) {
					this.hamdlegfChart();
				},
				immediate: true,
				deep: true,
			},
		},
		data() {
			return {
				echid: "",
				themeType: getStorage("themeSetting"),
			};
		},
		created() {
			this.echid = "ech_rw" + new Date().getTime();
		},
		mounted() {
			this.hamdlegfChart();
		},
		methods: {
			hamdlegfChart() {
				if (document.getElementById(this.echid)) {
					let myChart = echarts.init(document.getElementById(this.echid));
					var option = {
						grid: {
							left: "0",
							right: "0",
							bottom: "0",
							top: "0",
							containLabel: true,
						},
						tooltip: {
							trigger: "item",
						},
						legend: {
							bottom: "5",
							left: "center",
							textStyle: {
								color: this.themeType == "light" ? "#333" : "#fff",
							},
						},
						graphic: {
							type: "text",
							left: 133,
							top: 107,
							style: {
								text: "任务类型",
								textAlign: "center",
								fill: "#377aff",
								fontSize: 14,
								fontWeight: 600,
							},
						},
						series: [{
							name: "Access From",
							type: "pie",
							radius: ["30%", "50%"],
							center: ["50%", "40%"],
							avoidLabelOverlap: false,
							label: {
								alignTo: "edge",
								edgeDistance: 10,
								textStyle: {
									fontSize: 13,
									// color: "#000",
									lineHeight: 30,
								},
								formatter: function(data) {
									//自定义,加个判断 渲染不同样式 配🍱
									if (data.name == "已完成") {
										return (
											"{name|" +
											data.name +
											"}" +
											"{value|" +
											data.value +
											" }" +
											" \n" +
											"{num1|" +
											data.percent +
											"%" +
											"}"
										);
									}
									if (data.name == "超期完成") {
										return (
											"{name|" +
											data.name +
											"}" +
											"{value|" +
											data.value +
											" }" +
											" \n" +
											"{num2|" +
											data.percent +
											"%" +
											"}"
										);
									}
									if (data.name == "超期进行中") {
										return (
											"{name|" +
											data.name +
											"}" +
											"{value|" +
											data.value +
											" }" +
											" \n" +
											"{num3|" +
											data.percent +
											"%" +
											"}"
										);
									}
									if (data.name == "进行中") {
										return (
											"{name|" +
											data.name +
											"}" +
											"{value|" +
											data.value +
											" }" +
											" \n" +
											"{num4|" +
											data.percent +
											"%" +
											"}"
										);
									}
									if (data.name == "超期未完成") {
										return (
											"{name|" +
											data.name +
											"}" +
											"{value|" +
											data.value +
											" }" +
											" \n" +
											"{num5|" +
											data.percent +
											"%" +
											"}"
										);
									}
								},
								rich: {
									num1: {
										fontSize: 16,
										fontWeight: 600,
										color: "#1bb0ff",
									},
									num2: {
										fontSize: 16,
										fontWeight: 600,
										color: "#ffde19",
									},
									num3: {
										fontSize: 16,
										fontWeight: 600,
										color: "#f87373",
									},
									num4: {
										fontSize: 16,
										fontWeight: 600,
										color: "#88f2b9",
									},
									num5: {
										fontSize: 16,
										fontWeight: 600,
										color: "#f05654",
									},
								},
							},
							labelLine: {
								length: 8,
								length2: 20,
								maxSurfaceAngle: 80,
							},
							labelLayout: function(params) {
								const isLeft = params.labelRect.x < myChart.getWidth() / 2;
								const points = params.labelLinePoints;
								points[2][0] = isLeft ?
									params.labelRect.x :
									params.labelRect.x + params.labelRect.width;
								return {
									labelLinePoints: points,
								};
							},
							emphasis: {
								label: {
									show: true,
									fontSize: "20",
									fontWeight: "bold",
								},
							},
							data: [{
									value: this.datas.ywc,
									name: "已完成",
									itemStyle: {
										normal: {
											//颜色渐变
											color: new echarts.graphic.LinearGradient(
												1,
												0,
												1,
												1, //(上-下 渐变)
												[{
														offset: 1,
														color: "#4760ff"
													},
													{
														offset: 0.5,
														color: "#1bb0ff"
													},
												]
											),
										},
									},
								},
								{
									value: this.datas.jxz,
									name: "进行中",
									itemStyle: {
										normal: {
											//颜色渐变
											color: new echarts.graphic.LinearGradient(
												1,
												0,
												1,
												1, //(左上-右下 渐变)
												[{
														offset: 0,
														color: "#88f2b9",
													},
													{
														offset: 1,
														color: "#0dda72",
													},
												],
											),
										},
									},
								},
								{
									value: this.datas.cqwc,
									name: "超期完成",
									itemStyle: {
										normal: {
											//颜色渐变
											color: new echarts.graphic.LinearGradient(
												1,
												0,
												1,
												1, //(左上-右下 渐变)
												[{
														offset: 1,
														color: "#ff8747"
													},
													{
														offset: 0.5,
														color: "#ffde19"
													},
												]
											),
										},
									},
								},
								{
									value: this.datas.cqjxz,
									name: "超期进行中",
									itemStyle: {
										normal: {
											//颜色渐变
											color: new echarts.graphic.LinearGradient(
												1,
												0,
												1,
												1, //(左上-右下 渐变)
												[{
														offset: 1,
														color: "#ea2121"
													},
													{
														offset: 0.5,
														color: "#f87373"
													},
												]
											),
										},
									},
								},

								{
									value: this.datas.cqwwc,
									name: "超期未完成",
									itemStyle: {
										normal: {
											//颜色渐变
											color: new echarts.graphic.LinearGradient(
												1,
												0,
												1,
												1, //(左上-右下 渐变)
												[{
														offset: 1,
														color: "#f05654"
													},
													{
														offset: 0.5,
														color: "#f9906f"
													},
												]
											),
										},
									},
								},
							],
						}, ],
					};
					option && myChart.setOption(option);
				}
			},
		},
	};
</script>

<style scoped>
	.gfChart {
		margin-top: 1vw;
		height: 100%;
		width: 100%;
		margin: 0 auto;
	}
</style>
