<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_' + new Date().getTime();
		},
		mounted() {
			// this.titles = this.titles
			// this.datas = this.datas
			this.hamdlegfChart()
		},
		methods: {
			hamdlegfChart() {
				if (document.getElementById(this.echid)) {
					let myechart = echarts.init(document.getElementById(this.echid))
					myechart.setOption({
						grid: {
							left: '0',
							right: '0',
							bottom: '0',
							top: '10',
							containLabel: true
						},
						series: [{
							type: 'pie',
							radius: ['45%', '60%'],
							labelLine: {
								length: 30
							},
							label: {
								formatter: '{b|{b}}\n{per|{d}%}',
								minMargin: 5,
								edgeDistance: 10,
								lineHeight: 18,
								color: this.themeType == 'light' ? '#333':'#fff',
								rich: {
									b: {
										fontSize: 13,
									},
									per: {
										padding: [3, 4],
										borderRadius: 4
									}
								}
							},
							data: [{
									value: Math.floor(Math.random()*1000),
									name: '类型一'
								},
								{
									value: Math.floor(Math.random()*1000),
									name: '类型二'
								},
								{
									value: Math.floor(Math.random()*1000),
									name: '类型三'
								},
								{
									value: Math.floor(Math.random()*1000),
									name: '类型四'
								}
							]
						}]
					})
					window.addEventListener('resize', () => {
						myechart.resize();
					});
				}
			}
		}
	}
</script>

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