echarts折线渐变区域覆盖

 "echarts": "^5.2.0",  vue2.6

<template>
	<div :class="className" :style="{height:height,width:width}" id="myChart5" />
</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: '31vw'
			},
			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('myChart5'));
				var option = {
					animation: false,
					tooltip: {
						trigger: 'item',
						formatter: '{b}'
					},
					grid: {
						left: 30,
						right: 15,
						botom: 25,
						top: 15
					},
					legend: {
						show: false,
						data: [],
						textStyle: { //图例文字的样式
							color: '#A9D5E8',
							fontSize: 12
						}
					},
					xAxis: {

						type: 'category',
						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
						// data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
					},

					yAxis: {
						name:'单位/小时',
						boundaryGap: false,
						min: 0,
						max: 12,
						splitNumber: 7,
						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: 'line',
							data: [4.5, 6, 3, 7, 10, 5.5, 6],
							showSymbol: false,
							smooth: true,
							itemStyle: {
								normal: {
									lineStyle: {
										color: '#00BAAD' /*折线的颜色*/
									},
									color: "#00BAAD" /*图例(legend)的颜色,不是图例说明文字的颜色*/
								}
							},
							areaStyle: {
								opacity: 0.8,
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgb(6, 91, 137)'
									},
									{
										offset: 1,
										color: 'rgb(13, 49, 126)'
									}
								])
							},
						},
						{
							name: '派单趋势',
							type: 'line',
							data: [4.5, 8, 5, 7.5, 11, 7, 8],
							showSymbol: false,
							smooth: true,
							itemStyle: {
								normal: {
									lineStyle: {
										color: '#2A82E4' /*折线的颜色*/
									},
									color: "#2A82E4" /*图例(legend)的颜色,不是图例说明文字的颜色*/
								}
							},
							areaStyle: {
								opacity: 0.8,
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgb(18, 108, 148)'
									},
									{
										offset: 1,
										color: 'rgb(16, 52, 96)'
									}
								])
							},
						},


					]

				};
				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);
				// 获取周二以后日期
				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);
				}
				this.weekList = weeks;
				console.log(this.weekList, 'weekList')
				// return weeks


			},

		}
	}
</script>