【echarts】双折线图+区域渐变色配置项

最近使用echarts做一些统计图，界面效果如下：

配置项如下：

let yAxisMin = 0
let yAxisMax = 100
let xAxisRotate = 0
let xAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
let tsSeriesDtat = [95, 98, 99, 97, 98, 95, 97, 98, 95, 98, 96, 99]
let gzSeriesDtat = [98, 95, 94, 98, 99, 97, 96, 95, 98, 99, 94, 98]

option = {
	title: {
		text: '及时率',
		textStyle: {
			color: '#333',
			fontSize: 15,
			fontWeight: 500,
			height: 32,
			lineHeight: 32
		}
	},
	tooltip: {
		trigger: 'axis',
		// 下面这一坨是鼠标悬浮时的文字显示
		formatter: function(params) {
			var result = params[0].axisValue + '<br>';
			params.forEach(function(item) {
				// const value = item.seriesName === '投诉及时率' ? 98 : 99;
				// result += item.marker + item.seriesName + '：' + item.data + '%，基准值95%，挑战值' + value + '%<br>'
				result += item.marker + item.seriesName.substr(0, 5) + '：' + item.data + '%<br>'
			});
			return result;
		}
	},
	legend: {
		data: ['投诉及时率（基准值95%，挑战值98%）', '故障及时率（基准值95%，挑战值99%）'],
		right: 0
	},
	grid: {
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
	xAxis: {
		type: 'category',
		boundaryGap: true,
		data: xAxis,
		axisLabel: {
			color: '#C1C1C1',
			interval: 0, //代表显示所有x轴标签显示
			rotate: xAxisRotate
		},
		axisTick: {
			show: false // 不显示x轴刻度
		},
		axisLine: {
			lineStyle: {
				color: "#F3F3F3", // x轴横线颜色
			}
		},
	},
	yAxis: {
		type: 'value',
		show: true,
		axisLine: {
			show: false,
			lineStyle: {
				color: '#F3F3F3'
			}
		},
		axisTick: {
			show: false
		},
		min: yAxisMin,
		max: yAxisMax,
		axisLabel: {
			textStyle: {
				color: '#C1C1C1'
			},
			formatter: '{value}%'
		},
		splitLine: { //分割线配置
			show: true,
			lineStyle: {
				color: "#F3F3F3",
			}
		}
	},
	series: [{
			name: '投诉及时率（基准值95%，挑战值98%）',
			type: 'line',
			smooth: true,
			// symbol: 'circle', //设定为实心点
			symbolSize: 8, //设定实心点的大小
			color: 'rgb(86, 203, 202)',
			lineStyle: {
				color: 'rgb(86, 203, 202)'
			},
			itemStyle: {
				normal: {
					label: {
						show: false
					}
				}
			}, //设定顶部不显示数值
			// 下面是曲线下方颜色
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0, 0, 0, 1,
						[{
								offset: 0,
								color: 'rgb(86, 203, 202)',
							},
							{
								offset: 1,
								color: 'rgb(86, 203, 202, 0.1)',
							},
						],
						false
					),
				},
			},
			data: tsSeriesDtat,
			// 下面是基准线样式
			markLine: {
				symbol: "none",
				data: [{
					silent: false,
					lineStyle: {
						type: "solid",
						color: "#AFD3FF",
					},
					label: {
						position: 'end',
						color: "#AFD3FF",
						formatter: "95%"
					},
					yAxis: 95
				}]
			}
		},
		{
			name: '故障及时率（基准值95%，挑战值99%）',
			type: 'line',
			smooth: true,
			// symbol: 'circle', //设定为实心点
			symbolSize: 8, //设定实心点的大小
			color: 'rgb(239, 120, 150)',
			lineStyle: {
				color: 'rgb(239, 120, 150)'
			},
			itemStyle: {
				normal: {
					label: {
						show: false
					}
				}
			}, //设定顶部不显示数值
			// 下面是曲线下方颜色
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0, 0, 0, 1,
						[{
								offset: 0,
								color: 'rgb(239, 120, 150)',
							},
							{
								offset: 1,
								color: 'rgb(239, 120, 150, 0.1)',
							},
						],
						false
					),
				},
			},
			data: gzSeriesDtat
		}
	]
};;