Echarts绘制三条线间有区域颜色，同时在线上添加文字提示，以及添加一条标注的线

一、效果

二、实现

（1）使用堆叠图（stack属性相同形成堆叠图）实现区域的颜色，因为刚好该需求的三条线的数据是低、中、高的缘故，只需用50%的数据去减去3%的数据就可以得到50%这条线的数据，同时97%的数据，用97%的数据减去50%得到的数据即可实现该堆叠图的效果。

（2）线上文字提示的实现，使用的是每个点上的标注（label属性），但是使用了自定义标注，设定只有最后一个点的标注显示（使用symbolSize，为0则该点标注不会显示），同时是显示的是固定的数据。

（3）黄色线使用markLine实现

// 指定图表的配置项和数据
var option = {
	title: {
		text: '身高（cm）  曲线根据2009年发行的《中国儿童生长发育参照标准》绘制',
		// subtext: '曲线根据2009年发行的《中国儿童生长发育参照标准》绘制',
		textStyle: {//主标题的属性
			// color: '#FFF',//颜色
			fontSize: 10,//大小
			fontStyle: 'normal',//斜体
			fontWeight: '400',//粗细
			fontFamily: 'monospace',//字体
			color: 'rgba(102,102,102,1)',
		},
		y: '15px',
		left: 'center',
	},
	tooltip: {},
	// legend: {
	xAxis: {
	data: ["1个月", "2个月", "3个月", "4个月", "5个月", "6个月", "7个月", "8个月", "9个月", "10个月", "11个月", "12个月"],
		splitLine: {
			show: true,
			lineStyle: {
			color: '#e6e6e6',
			type: 'solid'
			}
		},
		boundaryGap: false,
		axisLine: {                  //---坐标轴 轴线
				show: true,                  //---是否显示
				//坐标线的颜色样式
				ineStyle: {
				color: '#999999',
				width: 1,
				type: 'solid',
				},
				},
				},
		yAxis: {
			min: 40,
			max: 120,
			// 刻度
			splitNumber: 10,
	    axisLine: {                  //---坐标轴 轴线
				show: true,                  //---是否显示
				//坐标线的颜色样式
				lineStyle: {
					color: '#999999',
					width: 1,
					type: 'solid',
				},
				},
			},
		series: [
		{
			name: '身高',
			itemStyle: {
				normal: {
					color: "#FF3E7E",
					lineStyle: {
						color: "#FF3E7E",
						width: 2
						}
					}
			},
			smooth: false,//是否平滑曲线
			symbol: 'circle', //设定为实心点
			//              name: '销量',
			type: 'line',
			data: [],
			z: 10,
			// data: [40, 50, 60, 70, 80, 90], //不是终坐标 
		},
		{
            name: 'bottom',
			itemStyle: {
				normal: {
				color: "#D1E8FF",
				// color: "#00FF00",
				lineStyle: {
				color: "#D1E8FF",
				// color: "#00FF00",
				width: 2
		    },
			// 设置线上提示
			label: {
				show: true,
				position: 'top',
				textStyle: {
					color: '#333'
				},
				// 自定义显示内容（实际只显示最后一个点）
				formatter: function (params) {
				if (params.value) {
				//return params.value + '%' 
					return '3%'
				} else {
					return '';
				}
				}
				}
			    }
		    },
			showAllSymbol: true,
			smooth: true, //这个是把线变成曲线
			type: 'line', //这个是展示数据的类型，是柱状图还是折线图，饼状图
			data: [], //展示的数据
			// 堆叠图
			stack: '总量',
		},
		{
		    itemStyle: {
				normal: {
				color: "#D1E8FF",
				lineStyle: {
				color: "#D1E8FF",
				width: 2
			},
			label: {
				show: true,
				position: 'top',
				textStyle: {
						color: '#333'
				},
				formatter: function (params) {
					if (params.value) {
						return '50%'
					} else {
						return '';
					}
			    }
	        }
		    }
		    },
		    name: 'center',
		    areaStyle: { normal: { color: '#e0f0ff' } },
		    smooth: true, //这个是把线变成曲线
		    type: 'line', //这个是展示数据的类型，是柱状图还是折线图，饼状图					        
            data: [], //展示的数据
		    stack: '总量',
		},
		{
		    itemStyle: {
		    normal: {
		    color: "#D1E8FF",
		    lineStyle: {
				color: "#D1E8FF",
				// color: "#FF3030",
				width: 2
				},
				label: {
					show: true,
					position: 'top',
					textStyle: {
						color: '#333'
				    },
					formatter: function (params) {
							if (params.value) {
								return '97%'
							} else {
								return '';
							}
						}
					}
				}
		},
		name: 'up',
		smooth: true, //这个是把线变成曲线
		type: 'line', //这个是展示数据的类型，是柱状图还是折线图，饼状图
		data: [], //展示的数据
		areaStyle: {
					normal: {
						color: '#e0f0ff' //改变区域颜色
					}
			},
		stack: '总量',

		},
		]
		};

getList() {
	const url = baseUrl + '/api/share/growRecord.json';
	const vm = this;
	let height = [];
	let formData = new FormData();
	formData.append('babyId', vm.babyId);
	formData.append('type', 2);
	axios.post(url, formData).then(res => {
	// console.log("res",res);
	if (res.data.status == 2000000) {
		let data = res.data.data.result;
		let x = res.data.data.month;
		let hasMonth = false;
		let curMonth = res.data.data.count + "个月";
		if (x.indexOf(curMonth) != -1) {
				hasMonth = true;
		}
		// console.log("data",data);
		// 初始化最后的数据列表
		let curCenterLine = [];
		let curUpLine = [];
		let curBottomLine = [];
		// 获取数据列表
		let upLine = res.data.data.growRecordDTO.grow97;
		let centerLine = res.data.data.growRecordDTO.grow50;
		let bottomLine = res.data.data.growRecordDTO.grow3;
		// 50%的线
		centerLine.map((item, index) => {
		// 确保只有最后一个点有提示
		if (index + 1 < centerLine.length) {
// 设计成堆叠图才能实现区域的样式设置，故用50%线的值减去3%线的值取差值，堆叠设置后加回去就跟原来数据一致
		// symbolSize为0，该点不显示提示
		curCenterLine.push({ value: item - bottomLine[index], symbolSize: 0 });
		} else {
			curCenterLine.push({ value: item - bottomLine[index], symbolSize: 4 });
		}
})
		// 97%的线
		upLine.map((item, index) => {
			if (index + 1 < upLine.length) {
// 设计成堆叠图才能实现区域的样式设置，故用97%线的值减去350%线的值取差值，堆叠设置后加回去就跟原来数据一致
			// symbolSize为0，该点不显示提示
			curUpLine.push({ value: item - centerLine[index], symbolSize: 0 })
			} else {
				curUpLine.push({ value: item - centerLine[index], symbolSize: 4 })
			}
})
		data.map(item => {
				height.push(item.value);
		})
		// 3%线
		bottomLine.map((item, index) => {
			if (index + 1 < bottomLine.length) {
				curBottomLine.push({ value: item, symbolSize: 0 })
			} else {
				curBottomLine.push({ value: item, symbolSize: 4 })
			}
})
			// height = height.reverse();
			// console.log("height",height);
			/ vm.myChart.hideLoading();
		let seriesData = [
				{
					name: 'bottom',
					data: curBottomLine
					// data:bottomLine
				},
				{
					name: 'center',
					data: curCenterLine
				},
				{
					name: 'up',
					data: curUpLine
				},
				{
					name: '身高',
					data: height
				},
				]
				if (hasMonth) {
				seriesData = [
					{
						name: 'bottom',
						data: curBottomLine
						// data:bottomLine
					},
					{
						name: 'center',
						data: curCenterLine
					},
					{
						name: 'up',
						data: curUpLine
					},
					{
						markLine: {
							silent: true,
							lineStyle: {
							normal: {
								type: 'dash',
								color: '#FFB922'
							},
							},
							label: {
								normal: {
									show: true,
									position: 'middle',
									formatter: '今天',
								},
							},
							data: [
								// {type : 'average'},
								{ xAxis: curMonth }
							],
							},
							name: '身高',
							data: height
						},
					]
					}
					// 填入数据
					vm.myChart.setOption({
						xAxis: {
							data: x
							},
						series: seriesData
							});
					} else {
						warmHint(res.data.message);
					}
				});
			}
		}