<template>
	<div class="pie-chart" ref="pieChart" style="height: 200px"></div>
</template>

<script>
import { filterMoney } from '@/common/js/util';
export default {
	name: '',
	components: {},
	props: {
		bgcolor: {
			type: String,
			default: '#FF7113',
		},
		datasetProps: {
			type: Number,
		},
		title: {
			type: String,
		},
	},
	data() {
		return {
			options: {
				tooltip: {
					trigger: 'item',
				},
				textStyle: {
					fontSize: 12,
				},
				title: {
					text: '10000',
					subtext: '有效合同数',
					left: 'center',
					top: '40%',
					textStyle: {
						color: '#333',
						fontSize: 20,
						align: 'center',
					},
					subtextStyle: {
						color: '#666666',
					},
				},
				series: [
					{
						name: '',
						type: 'pie',
						radius: ['60%', '70%'],
						avoidLabelOverlap: false,
						emphasis: {
							label: {
								show: true,
								fontSize: '40',
								fontWeight: 'bold',
							},
						},
						labelLine: {
							show: false,
						},
						data: [
							{
								value: 1048,
							},
						],
						color: [this.bgcolor], //各个区域颜色
					},
				],
			},
		};
	},
	methods: {
		drawChart() {
			const chart = this.$refs.pieChart;
			if (chart) {
				const myChart = echarts.init(chart);
				const option = this.options;

				option.title.text = filterMoney(this.datasetProps);
				option.title.subtext = this.title;
				option.series[0].name = this.title;
				option.series[0].data[0].value = this.datasetProps;

				myChart.setOption(option);
				window.addEventListener('resize', function () {
					myChart.resize();
				});
			}
			this.$on('hook:destroyed', () => {
				window.removeEventListener('resize', function () {
					myChart.resize();
				});
			});
		},
	},
	created() {},
	mounted() {
		this.drawChart();
	},
};
</script>
<style lang="" scoped></style>
