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

<script>
	import * as echarts from 'echarts';
	import chartMixin from '@/mixins/ChartMixin';
	export default {
		mixins: [chartMixin],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '100%'
			},
			chartData: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				chart: null
			}
		},
		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({date,gjzs,} = {}) {
				var maxValue = Math.max(...gjzs);
				this.chart.setOption({
					color: ["#3398DB"],
					tooltip: {
					    trigger: 'axis',
					    axisPointer: {
					      type: 'shadow'
					    },
					  },
					grid: {
					    left: '10',
					    right: '10',
					    bottom: '10',
					    top: '20',
					    containLabel: true
					},
					xAxis: {
						data: date,
						axisLabel: {
							color: "#FFFFFF",
						},
						axisLine: {
							lineStyle: {
								color: "#8CBAEE"
							}
						},
						axisTick: {
							show: false
						}
					},
					yAxis: {
						max: maxValue * 1.2, // 留出一些空间
						axisLabel: {
							color: "#8CBAEE"
						},
						axisLine: {
							lineStyle: {
								color: "#8CBAEE"
							}
						},
						axisTick: {
							show: false
						},
						splitLine: {
							lineStyle: {
								color: "#0B0842"
							}
						}
					},
					label: {
					show: true,
					position: "top", // 展示在柱子的上方
					color: "#333",
					},
					// 立方体柱状
					series: [
						{
						     // 背景柱（统一高度）
						     name: '背景',
						     type: 'custom',
						     barWidth: 40,
						     barGap: '-100%', // 使背景柱与数据柱重叠
						     renderItem: (params, api) => {
						     	const basicsCoord = api.coord([api.value(0), api.value(1)]);
						     	const topBasicsYAxis = basicsCoord[1];
						     	const basicsXAxis = basicsCoord[0];
						     	const bottomYAxis = api.coord([api.value(0), 0])[1];
						     	return {
						     		type: "group",
						     		children: [
						     			// 左侧
						     			{
						     				type: "polygon",
						     				shape: {
						     					points: [
						     						[basicsXAxis - 10, topBasicsYAxis - 4],
						     						[basicsXAxis - 10, bottomYAxis],
						     						[basicsXAxis, bottomYAxis],
						     						[basicsXAxis, topBasicsYAxis]
						     					]
						     				},
						     				style: {
						     					fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
						     							offset: 0,
						     							color: '#1F98CC'
						     						},
						     						{
						     								offset: 0.1,
						     								color: '#013262'
						     							},
						     						{
						     								offset: 0.9,
						     								color: '#013262'
						     							},
						     						{
						     							offset: 1,
						     							color: '#1F98CC'
						     						}
						     					])
						     				}
						     			},
						     			// 右侧
						     			{
						     				type: "polygon",
						     				shape: {
						     					points: [
						     						[basicsXAxis, topBasicsYAxis],
						     						[basicsXAxis, bottomYAxis],
						     						[basicsXAxis + 10, bottomYAxis],
						     						[basicsXAxis + 10, topBasicsYAxis - 4]
						     					]
						     				},
						     				style: {
						     					fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
						     							offset: 0,
						     							color: '#1F98CC'
						     						},
						     						{
						     								offset: 0.1,
						     								color: '#013262'
						     							},
						     						{
						     								offset: 0.9,
						     								color: '#013262'
						     							},
						     						{
						     							offset: 1,
						     							color: '#1F98CC'
						     						}
						     					])
						     				}
						     			},
						     			// 顶部
						     			{
						     				type: "polygon",
						     				shape: {
						     					points: [
						     						[basicsXAxis, topBasicsYAxis],
						     						[basicsXAxis - 10, topBasicsYAxis - 4],
						     						[basicsXAxis, topBasicsYAxis - 6],
						     						[basicsXAxis + 10, topBasicsYAxis - 4]
						     					]
						     				},
						     				style: {
						     					fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#1F98CC'},{offset: 0.5,color: '#1F98CC'},{offset: 1,color: '#1F98CC'}
						     					])
						     				}
						     			}
						     		]
						     	};
						     },
						     data: date.map(() => maxValue  * 1.1), // 背景柱统一高度
						     animation: false
						},
						
						{
						type: "custom",
						data: gjzs,
						renderItem: (params, api) => {
							const basicsCoord = api.coord([api.value(0), api.value(1)]);
							const topBasicsYAxis = basicsCoord[1];
							const basicsXAxis = basicsCoord[0];
							const bottomYAxis = api.coord([api.value(0), 0])[1];
							return {
								type: "group",
								children: [
									// 左侧
									{
										type: "polygon",
										shape: {
											points: [
												[basicsXAxis - 10, topBasicsYAxis - 4],
												[basicsXAxis - 10, bottomYAxis],
												[basicsXAxis, bottomYAxis],
												[basicsXAxis, topBasicsYAxis]
											]
										},
										style: {
											fill: new echarts.graphic.LinearGradient(0, 0, 1,1, [{
													offset: 0,
													color: '#BDE2FC'
												},
												{
														offset: 0.1,
														color: '#006FBD'
													},
												{
													offset: 1,
													color: '#0883CD'
												}
											])
										}
									},
									// 右侧
									{
										type: "polygon",
										shape: {
											points: [
												[basicsXAxis, topBasicsYAxis],
												[basicsXAxis, bottomYAxis],
												[basicsXAxis + 10, bottomYAxis],
												[basicsXAxis + 10, topBasicsYAxis - 4]
											]
										},
										style: {
											fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
													offset: 0,
													color: '#59B5F5'
												},
												{
														offset: 0.1,
														color: '#59B5F5'
													},
												{
													offset: 1,
													color: '#0B61A3'
												}
											])
										}
									},
									// 顶部
									{
										type: "polygon",
										shape: {
											points: [
												[basicsXAxis, topBasicsYAxis],
												[basicsXAxis - 10, topBasicsYAxis - 4],
												[basicsXAxis, topBasicsYAxis - 6],
												[basicsXAxis + 10, topBasicsYAxis - 4]
											]
										},
										style: {
											fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#1F98CC'},
												{offset: 1,color: '#1F98CC'}
											])
										}
									}
								]
							};
						}
					}]

				}, true)
			}
		}
	}
</script>
<style lang="less" scoped>

</style>
