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

<script>
	import * as echarts from 'echarts'
	export default {
		props: ["datas",'id'],
		watch: {
			datas: {
				handler(val) {
					this.hamdlegfChart()
				},
				immediate: true,
				deep: true
			}
		},
		data() {
			return {
				echid: '',
			}
		},
		created() {
			this.echid = 'echa_'+this.id + new Date().getTime();
		},
		mounted() {
			this.hamdlegfChart()
		},
		methods: {
			hamdlegfChart() {
				if (document.getElementById(this.echid)) {
					let myechart = echarts.init(document.getElementById(this.echid))
					myechart.setOption({
						tooltip: {},
						series: [{
							name: '',
							type: 'pie',
							radius: '76%',
							center: ['50%', '50%'],
							label: {
								position: 'inside',
								textStyle: {
									fontSize: 14,
									color: '#fff'
								},
								formatter: "{num|{c}} \n {name|{b}} ",
								rich: {
									num: {
										fontSize: 18,
									}
								}
							},
							data: this.datas,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0,0,0,.5)'
								}
							}
						}]
					})
					window.addEventListener('resize', () => {
						myechart.resize();
					});
				}
			}
		},
	}
</script>

<style scoped>
	.gfChart {
		height: 100%;
		width: 100%;
	}
</style>
