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

<script>
	import * as echarts from 'echarts';
	import chartMixin from '@/mixins/ChartMixin';
	export var data1 = [{
			value: 44,
			name: '低等级'
		},
		{
			value: 68,
			name: '中等级'
		},
		{
			value: 34,
			name: '高等级'
		},
	]

	export default {
		mixins: [chartMixin],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '120px'
			},
			height: {
				type: String,
				default: '180px'
			},
			chartData: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				timer: 0,
				chart: ''
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.setOption(val)
				}
			}
		},
		mounted() {
			// this.$nextTick(() => {
			this.initChart();
			// })
		},
		beforeDestroy() {

		},
		methods: {
			initChart() {
				this.chart = echarts.init(document.getElementById('myChartZyzxl'));
				this.setOptions(this.chartData)
				window.addEventListener('resize', function() {
					this.chart.resize()
				})
			},
			setOptions({
				ddj,
				zdj,
				gdj
			} = {}) {
				let total = parseInt(ddj) + parseInt(zdj) + parseInt(gdj);
				this.chart.setOption({
					color: ["#0096FF","#00FFFF","#FFBB37","#7948EA"],
					graphic: [ // 使用 graphic 组件添加文本
						{
							type: 'text', // 文本类型
							left: 'center', // 文本水平居中
							top: '25%', // 文本垂直居中
							style: {
								text: ['{a|总告警数\n}{b|146}{c|次}'], // 多行文本，每行之间用 \n 分隔
								// fontSize: 14, // 字体大小
								rich: { // 富文本功能，用于设置不同样式的文本段
									a: {
										fontSize: 14,fill: '#FFFFFF',align: 'center',lineHeight: 20
									},
									c: {
										fontSize: 10,fill: '#FFFFFF',align: 'center',lineHeight: 20
									},
									// 需要渐变高亮的文字样式
									b: { 
										fontSize: 14,
									    align: 'center',
										fill:'#00F8F9',
									},
								}
							},
						}
					],
					legend: {
						orient: 'horizontal',
						left: 0, // 设置图例在容器中的水平位置
						bottom: 12,
						itemHeight: 10,
						itemWidth: 10,
						// width: 10, //图例的宽度，想要对齐这个必须要有
						itemGap: 6, //各组的间距
						data: ['低等级', '中等级', '高等级'],
						textStyle: {
							fontSize: 12,
							color: '#ffffff' // 设置图例文字颜色为深灰色
						},
					},
					series: [
						// A版块
						{
							name: "低等级",
							type: "pie",
							radius: ["85%", "90%"],
							center: ["50%", "34%"],
							startAngle: -90, // 设置起始角度为-90度，实现逆时针
							//环的位置
							// label: {
							// 	show: false,
							// 	position: "center",
							// },
							labelLine: {
								normal: {
									show: false,
								},
							},
							data: [{
									value: ddj, //需要显示的数据
									name: '低等级',
									itemStyle: {
										normal: {
											color: "#0096FF",
										},
									},
								},
								{
									value: total - ddj,
									//不需要显示的数据，颜色设置成和背景一样
									itemStyle: {
										normal: {
											color: "#3C4E78",
										},
									},
								},
							],
						},
						// B版块
						{
							name: "中等级",
							type: "pie",
							radius: ["70%", "75%"],
							center: ["50%", "34%"],
							startAngle: -90, // 设置起始角度为-90度，实现逆时针
							labelLine: {
								normal: {
									show: false,
								},
							},
							data: [{
									value: zdj, //需要显示的数据
									name: '中等级',
									itemStyle: {
										normal: {
											color: "#00FFFF",
										},
									},
								},
								{
									value: total - zdj,
									//不需要显示的数据，颜色设置成和背景一样
									itemStyle: {
										normal: {
											color: "#3C4E78",
										},
									},
								},
							],
						},
						// C版块
						{
							name: "高等级",
							type: "pie",
							radius: ["55%", "60%"],
							center: ["50%", "34%"],
							startAngle: -90, // 设置起始角度为-90度，实现逆时针
							labelLine: {
								normal: {
									show: false,
								},
							},
							data: [{
									value: gdj, //需要显示的数据
									name: '高等级',
									itemStyle: {
										normal: {
											color: "#FFBB37",
										},
									},
								},
								{
									value: total - gdj,
									//不需要显示的数据，颜色设置成和背景一样
									itemStyle: {
										normal: {
											color: "#3C4E78",
										},
									},
								},
							],
						},

					],
				})
			},
			// 		initChart() {
			// 			var myChart = echarts.init(document.getElementById('myChartZyzxl'));
			// 			// total 和 salary的数据就是各个环的数据
			// 			// let salayry1 = 44;
			// 			// let salayry2 = 68;
			// 			// let salayry3 = 34;
			// 			let total = parseInt(ddj) + parseInt(zdj) + parseInt(gdj) ;
			// 			// console.log(total, '222')
			// 			let option = {

			// 			};
			// 			myChart.setOption(option);

			// 			// window.addEventListener('resize', myChart.resize);


			// 		},


		}
	}
</script>
