echarts 渐变柱状图 阴影与柱宽不一致

vue:2.6; "echarts": "^5.2.0", 

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

<script>
	import * as echarts from 'echarts';
	import resize from '@/utils/resize.js'
	
	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '24vw'
			},
			height: {
				type: String,
				default: '28vh'
			},
			chartData: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				
				timer: 0,
				date: '',
				weekList: [],
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.setOption(val)
				}
			},

		},
		mounted() {
			this.initChart();
		},
		beforeDestroy() {
			
		},
		methods: {
			initChart() {
				//获取一周日期
				this.getWeekDataList();
				var myChart = echarts.init(document.getElementById('myChartZyzfwsc'));
				var option = {
					animation: false,
					tooltip: {
						trigger: 'item',
						formatter: '{b}:{c}'
					},
					grid: {
						left: 40,
						right: 15,
						botom: 10,
						top: 35
					},
					legend: {
						show: false,

					},
					xAxis: {
						type: 'category',
						boundaryGap: ['0', '5%'],
						// boundaryGap: false,
						splitLine: {
							show: false
						},
						axisLabel: {
							color: "#8590A4",
							textStyle: {
								fontSize: 12,

							},
							interval: 0, //坐标全部显示
						},
						/*网格线*/
						axisLine: {
							// 轴线
							show: true,
							lineStyle: {
								color: "#56678D", //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
								width: 1, //y轴线的宽度
								type: "solid" //y轴线为实线
							},
							// color: '#268C8C',
						},
						data: this.weekList
					},

					yAxis: {
						type: 'value',
						name: '单位/小时',
						nameTextStyle: {
							color: "#8590A4",
							fontSize: 12,
						},
						boundaryGap: false,
						min: 0,
						max: 2500,
						splitNumber: 5,
						axisTick: {
							// 轴刻度
							show: false,
						},
						axisLabel: {
							color: "#8590A4",
							textStyle: {
								fontSize: 12,
								fontWeight: 400,

							},
						},
						splitLine: {
							// 网格线
							show: true,
							lineStyle: { //分割线
								color: "#30436D",
								width: 1,
								type: "dashed" //dotted：虚线 solid:实线
							}

						},
						axisLine: {
							// 轴线
							show: false,
							lineStyle: {
								color: "#fff", //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
								width: 1, //y轴线的宽度
								type: "solid" //y轴线为实线
							},
						},

					},
					series: [{
							name: '志愿者服务时长阴影',
							type: 'bar',
							data: [2500, 2500, 2500, 2500, 2500, 2500, 2500],
							barWidth: '40',
							z:"-1",
							barGap: '-78%',
							itemStyle: {
								normal: {
									opacity: 0.8,
									// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。
									// 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(255, 255, 255, 0.1)' //指0%处的颜色
									}, {
										offset: 1,
										color: 'rgba(255, 255, 255, 0.1)' //指100%处的颜色
									}], false)
								}
							},

						},
						{
								name: '志愿者服务时长',
								type: 'bar',
								data: [600, 1400, 1600, 1650, 1200, 1100, 1400],
								barWidth: '23',
								itemStyle: {
									normal: {
										opacity: 0.8,
										// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。
										// 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
										color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: 'rgb(3, 114, 229)' //指0%处的颜色
										}, {
											offset: 1,
											color: 'rgb(75, 175, 252)' //指100%处的颜色
										}], false)
									}
								},
						
							},


					]

				};
				myChart.setOption(option);
				// window.addEventListener('resize', myChart.resize);
				window.addEventListener('resize', function() {
					myChart.resize()
				})


			},
			//获取当日日期
			getNowDate() {
				const timeOne = new Date()
				const year = timeOne.getFullYear()
				let month = timeOne.getMonth() + 1
				let day = timeOne.getDate()
				month = month < 10 ? '0' + month : month
				day = day < 10 ? '0' + day : day
				const NOW_MONTHS_AGO = `${year}-${month}-${day}`
				return NOW_MONTHS_AGO
			},
			// 获取当前一周日期
			getWeekDataList() {
				//获取当前日期
				this.getNowDate();
				this.date = this.getNowDate();
				console.log(this.date, 'currentData')

				//根据日期获取本周周一~周日的年-月-日
				var weeks = [];
				var date = new Date(this.date);
				//判断本日期是否为周日，获取本周一日期
				if (date.getDay() == "0") {
					date.setDate(date.getDate() - 6);
				} else {
					date.setDate(date.getDate() - date.getDay() + 1);
				}
				var myDate = date.getDate();
				var myMonth = date.getMonth() + 1;
				if (date.getDate() < 10) {
					myDate = '0' + myDate;
				}
				if (date.getMonth() + 1 < 10) {
					myMonth = '0' + myMonth;
				}
				// weeks.push(date.getFullYear() + "-" + myMonth + "-" + myDate);
				weeks.push(myMonth + "-" + myDate);
				// 获取周二以后日期
				for (var i = 0; i < 6; i++) {
					date.setDate(date.getDate() + 1);
					myDate = date.getDate();
					myMonth = date.getMonth() + 1;
					if (date.getDate() < 10) {
						myDate = '0' + myDate;
					}
					if (date.getMonth() + 1 < 10) {
						myMonth = '0' + myMonth;
					}
					// weeks.push(date.getFullYear() + "-" + myMonth + "-" + myDate);
					weeks.push(myMonth + "-" + myDate);
				}
				this.weekList = weeks;
				console.log(this.weekList, 'weekList')
				// return weeks


			},

		}
	}
</script>