echarts- 渐变折线图

效果图：

需求点：

1. x轴是时间

2. 折线区域是渐变色

3. 显示折线小圆点

option: {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						lineStyle: {
							color: '#57617B'
						}
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						boundaryGap: false,
						axisLine: {
							lineStyle: '#d8d8d8'
						},
						axisLabel: {
							textStyle: '#cccccc'
						},
						splitLine: {
							show: true,
							lineStyle: '#d8d8d8' // x轴内容线颜色（横线）
						},
						data: ['07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30']
					}
				],
				yAxis: [
					{
						type: 'value',
						name: '人数',
						axisTick: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle: '#d8d8d8' // Y轴坐标颜色
						},
						axisLabel: {
							margin: 10,
							textStyle: '#cccccc'
						},
						splitLine: {
							//网格线
							lineStyle: {
								color: '#d8d8d8' // Y轴内容线颜色（横线）
							}
						},
						nameTextStyle: { color: '#ffffff', fontSize: 16, padding: [0, 50, 0, 0] }
					}
				],
				series: [
					{
						name: '时间',
						type: 'line',
						symbolSize: 8,
						label: {
							show: true, //开启显示
							textStyle: {
								color: '#fff'
							}
						},
						lineStyle: {
							normal: {
								color: 'rgba(34, 251, 183, 1)', // 折线颜色
								width: 2,
								shadowColor: 'rgba(34,150,243, 0.3)' // 折线阴影颜色
							}
						},
						itemStyle: {
							normal: {
								color: 'rgba(34, 251, 183, 1)' // 折线小圆点颜色
							}
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{
											offset: 0,
											color: 'rgba(13, 253, 178, 1)' // 折线底下区域渐变色
										},
										{
											offset: 0.8,
											color: 'rgba(5, 80, 57, 1)' // 折线底下区域渐变色
										}
									],
									false
								)
							}
						},
						data: [0, 200, 167, 142, 85, 121, 186, 243, 162, 137, 0, 0]
					}
				]
			}复制