<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 = 'echc_' + new Date().getTime();

		},
		mounted() {
			this.hamdlegfChart()
		},
		methods: {
			hamdlegfChart() {
				if (document.getElementById(this.echid)) {
					let myechart = echarts.init(document.getElementById(this.echid))
					myechart.setOption({
						legend: {
							textStyle:{
								color:this.themeType == 'light' ? '#333':'#fff'
							}
						},
						grid: {
							left: '10',
							right: '10',
							bottom: '0',
							top: '35',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							// data: ['xxx派出所','xxx派出所','xxx派出所','xxx派出所','xxx派出所'],
							data: this.datas.Xlist,
							axisLabel: {
								interval: 0,
								rotate: 40,
								textStyle: {
									color: this.themeType == 'light' ? '#333':'#fff'
								}
							}
						},
						yAxis: {
							type: 'value',
							splitLine: {
								show: false,
							},
						},
						series: [{
								name: '系统问题',
								type: 'bar',
								stack: 'total',
								label: {
									show: true,
									color: '#fff',
									fontSize: 12
								},
								emphasis: {
									focus: 'series'
								},
								// data: [30,50,20.50,60,50],
								data: this.datas.xtwtList,
								barGap: '20',
								barWidth: '20',
								// barGap: '50%',
								// barWidth:'50%',
								color: [{
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
											offset: 0,
											color: '#39B079'
										},
										{
											offset: 1,
											color: '#39B079'
										}
									]

								}]
							}, {
								name: '功能改进',
								type: 'bar',
								stack: 'total',
								barGap: '50%',
								barWidth: '50%',
								label: {
									show: true,
									color: '#fff'
								},
								emphasis: {
									focus: 'series'
								},
								data: this.datas.gngjList,
								color: [{
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
											offset: 0,
											color: '#D17D1C'
										},
										{
											offset: 1,
											color: '#ff887c'
										}
									]
								}]
							},
							{
								name: '新需求',
								type: 'bar',
								barGap: '50%',
								barWidth: '50%',
								stack: 'total',
								label: {
									show: true,
									color: '#fff'
								},
								emphasis: {
									focus: 'series'
								},
								data: this.datas.xxqList,
								color: [{
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
											offset: 0,
											color: '#EB0E0E'
										},
										{
											offset: 1,
											color: '#D31F1F'
										}
									]
								}]
							},
						]
					})
					window.addEventListener('resize', () => {
						myechart.resize();
					});
				}
			}
		},
	}
</script>

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