<template>
	<div id="myPies" style="height: 100%"></div>
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector'

export default {
	name: 'myPies',
	data() {
		return {
			myPies: null
		}
	},

	mounted() {
		this.initPie()
		const erd = elementResizeDetectorMaker()
		erd.listenTo(document.getElementById('myPies'), () => {
			this.$nextTick(() => {
				//监听到事件后执行的业务逻辑
				this.initPie()
			})
		})
	},
	methods: {
		initPie() {
			let myPie = document.getElementById('myPies')
			this.myPies = this.$echarts.init(myPie)
			const data = [
				{ name: '冷', value: 500 },
				{ name: '适中', value: 900 },
				{ name: '热', value: 600 }
			]
			const option = {
				tooltip: {
					trigger: 'item'
				},

				legend: {
					show: true,
					orient: 'horizontal',
					//   left: "center",
					bottom: '0',
					itemHeight: 13,
					itemWidth: 13,
					itemGap: 35,
					icon: 'circle',
					data: data,
					formatter: function(name) {
						var total = 0
						var target
						var value
						for (let i = 0, l = data.length; i < l; i++) {
							value = data[i].value
							total += data[i].value
							if (data[i].name == name) {
								target = data[i].value
							}
						}
						return (
							name +
							'     ' +
							((target / total) * 100).toFixed(0) +
							'%'
						)
					},
					textStyle: {
						rich: {
							a: {
								color: '#333333',
								// verticalAlign: "top",
								// align: "center",
								// fontSize: 12,
								// padding: [10, 0, 28, 0]
								padding: 20
							},
							b: {
								// align: "left",
								// fontSize: 18,
								padding: [10, 10, 10, 0],
								// // lineHeight: 25,
								color: '#333333'
							}
						}
					}
				},
				color: [
					'rgba(72,154,254,1)',
					'rgba(247,243,204,1)',
					'rgba(236,73,104,1)'
				],
				series: [
					{
						type: 'pie',
						radius: ['50%', '70%'],
						center: ['50%', '40%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center',
							normal: {
								show: true,
								position: 'center',
								formatter: function() {
									return `\r\n20000`
								},
								textStyle: {
									fontSize: 30,
									lineHeight: 20,
									color: '#36CBCB'
								}
							}
						},
						emphasis: {
							label: {
								show: false,
								fontSize: '20',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: [...data]
					}
				]
			}

			this.myPies.setOption(option)
			this.myPies.resize()
		}
	}
}
</script>