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

<script>
	import * as echarts from 'echarts';
	import chartMixin from '@/mixins/ChartMixin';
//灰色部分统一设置颜色
var placeHolderStyle = {
  normal: {
    color: '#001428'
  },
  emphasis: {
    color: '#001428'
  }
}
	export default {
		mixins: [chartMixin],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '100%'
			},
			chartData: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				chart: null,
				option:{},
				colorArr: [
				        "#06C770", "#FFAB2B", "#F59FBC", "#3FBCEF", "#7CC623", "#FF6969",
				],
				//圆环中心位置
				positionArr: [
				        ["18%", "25%"],
				        ["50%", "25%"],
				        ["82%", "25%"],
				        ["18%", "75%"],
				        ["50%", "75%"],
				        ["82%", "75%"],
				      ],
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.setOptions(val)
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart()
			})
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			initChart() {
				this.chart = echarts.init(this.$el, 'macarons')
				this.setOptions(this.chartData)
			},
			setOptions(chartData) {
				let seriesArr = chartData.map((item, index) => {
					return {
						name: item.name,
						type: "pie",
						radius: [30, 35], // 圆环饼图内外直径的大小
						center: this.positionArr[index], // 饼图的位置——正中心
						label: {
							show: true, // 显示饼图每块区域的名称
							position: "center", // 标签文字显示在圆环中间
							color: this.colorArr[index], // 每个饼图的标签文字颜色
						},
						labelLine: {
							show: false, // 隐藏名字和图之间默认的一条线
						},
						data: [{
								value: item.value,
								name: item.value + "%", //lable显示的文字内容
								itemStyle: {
									color: this.colorArr[index], //该区域对应渐变色
								}
							},
							{
								// name: "空白",
								// name: item.value + "%" + "\n\n" + item.name, //lable显示的文字内容
								value: 100-item.value,
								itemStyle: placeHolderStyle,
							},
						],
					};
				})
				this.option.series = seriesArr
				this.chart.setOption(this.option);
			}
		}
	}
</script>
<style lang="less" scoped>

</style>
