<template>
	<div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import resize from '@/utils/chartMixins/resize';

const animationDuration = 1000;

export default {
	mixins: [resize],
	props: {
		className: {
			type: String,
			default: 'chart',
		},
		title: {
			type: String,
			default: 'chart',
		},
		width: {
			type: String,
			default: '100%',
		},
		height: {
			type: String,
			default: '250px',
		},
		pieData: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			chart: null,
		};
	},
	beforeDestroy() {
		if (!this.chart) {
			return;
		}
		this.chart.dispose();
		this.chart = null;
	},
	methods: {
		initChart() {
			this.chart = echarts.init(this.$el, 'macarons');
			let totalNumber = 0;
			this.pieData.forEach((i) => {
				i.value = i.num;
				i.name = i.status;
				totalNumber += i.num;
			});
			this.chart.setOption({
				title: {
					zlevel: 2, // 控制圆环图中间的字的层级
					text: '总数',
					subtext: totalNumber,
					top: '42%', // 控制位置
					left: '50%', // 控制位置
					textAlign: 'center', // 让文字居中
					textStyle: {
						color: 'rgba(203, 195, 195, 1)',
					},
					subtextStyle: {
						fontSize: 20,
					},
				},
				tooltip: {
					trigger: 'item',
					show: true, // 控制鼠标悬浮是否显示数据
					formatter: '产品: {b}<br/>数量: {c}<br/>占比: {d}%',
				},
				legend: {
					orient: 'vartical',
					bottom: 0,
					left: 'right',
					icon: 'circle',
					itemGap: 16, //图例每项之间的间隔
					textStyle: {
						// 文字的样式
						fontSize: 24, // 可控制每个legend项的间距
						color: '#828282',
						rich: {
							oneone: {
								width: 50,
								color: '#000000',
								fontSize: 12,
								fontWeight: 'bolder',
							},
							twotwo: {
								width: 35,
								color: '#333',
								fontSize: 12,
							},
							threethree: {
								width: 20,
								color: '#959595',
								fontSize: 12,
							},
						},
					},
					formatter: (name) => {
						var target = this.pieData.find((item) => {
							return item.name === name;
						}).num;
						var v = ((target / totalNumber) * 100).toFixed(2);
						return `{oneone|${name}}  {twotwo|${target}个}   {threethree|${v}%}`;
					},
				},

				// legend: {
				// 	bottom: '0%',
				// 	left: 'center',
				// },
				grid: {
					top: 40,
					left: '0%',
					right: '2%',
					bottom: '3%',
					containLabel: true,
				},
				series: [
					{
						name: 'pie',
						type: 'pie',
						radius: ['55%', '80%'],
						bottom: '20%',
						avoidLabelOverlap: true, // 防止牵引线堆叠挤在一块
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2,
						},
						label: {
							normal: {
								show: true,
								position: 'outside', // 另有参数inside，可以让数据在圆环上
								formatter: '{b}', //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
								textStyle: {
									// 牵引线上的文字的样式
									align: 'right',
									baseline: 'middle',
									fontFamily: '微软雅黑',
									fontSize: 12,
									fontWeight: 'bolder',
									color: '#333',
								},
							},
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold',
							},
						},
						labelLine: {
							show: true,
							length: 17,
							length2: 57,
						},
						data: this.pieData,
					},
				],
			});
		},
	},
};
</script>
