<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({
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						grid: {
							left: '10',
							right: '10',
							bottom: '0',
							top: '25',
							containLabel: true
						},
						xAxis: [{
							type: 'category',
							data: this.datas.titles,
							axisTick: {
								alignWithLabel: true
							}
						}],
						yAxis: [{
							type: 'value',
							splitLine: {
								show: false
							},
						}],
						series: [{
							type: 'bar',
							barWidth: 11,
							stack: 'Total',
							label: {
								show: true,
								position: 'top',
								color: this.themeType == 'light' ? '#333':'#fff'
							},
							itemStyle: {
								normal: {
									barBorderRadius: [5, 5, 5, 5]
								}
							},
							data: this.datas.xsList,
							color: [{
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
										offset: 0,
										color: '#00c0fa'
									},
									{
										offset: 1,
										color: '#015eea'
									}
								]
							}]
						}]
					})
					window.addEventListener('resize', () => {
						myechart.resize();
					});
				}
			}
		}
	}
</script>

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