带阴影可切换年月日的折线图/曲线图

1. 实现带阴影的折线图，并可切换年月日进行展示不同的数据

效果展示：

带阴影且可进行年月日切换的折线图/曲线图

HTML

<el-card class="box-card">
    <div slot="header" class="clearfix">
        <span>报警趋势统计</span>
		<div class="select_time" >
			<span class="active" data-type="年">年</span>
			<span data-type="月">月</span>
			<span data-type="日">日</span>
		</div>
    </div>
    <div id="alarm_trend"></div>
</el-card>

CSS：样式可根据自己情况自己写，“年月日”是通过子绝父相定位

        .el-card {
            font-size: 20px;
            width: 90%;
            margin: 30px auto;
            border: none;
            background-color: #051a38;
            overflow: hidden;
            color: #fff;
            -webkit-transition: .3s;
            transition: .3s;
        }
        .el-card__header {
            border-bottom: 1px solid #5dd2f1;
            box-sizing: border-box;
			padding: 10px 10px;
        }
		#alarm_trend {
			width: 100%;
			height: 400px;
			/* background:pink; */
		}
		.clearfix {
			position: relative;
		}
		.select_time {
			width: 210px;
			/* border-radius: 5px; */
			float: right;
			background: #1e3d64;
			left: 74%;
    		top: 221%;
			position: absolute;
	        z-index: 11;
		}

		.select_time span {
			display: block;
			width: 70px;
			height: 35px;
			float: left;
			/* background: #4095e5; */
			text-align: center;
			line-height: 35px;
			color: #1677df;
		}
		.select_time .active {
			background-color: #4c9bfd;
  			color: #74f8fd;
		}

JS：绘制折线图的模板，获取数据后直接调用该函数进行图表的渲染

			// 折线图
			gradientChart(id, xData,serialData) {
				echarts.dispose(document.getElementById(id));

				let myChart = echarts.init(document.getElementById(id));
				myChart.setOption({
					color:['#88ffc3','#4992ff'],
					tooltip: {
						// 通过坐标轴来触发
						trigger: "axis"
					},
					legend: {
						// 距离容器
						// right: "50%",
						// left:center,
						// 修饰图例文字的颜色
						textStyle: {
							color: "#fff"
						}
					},
					grid: {
						top: "20%",
						left: "5%",
						right: "5%",
						bottom: "3%",
						show: true,
						borderColor: "#012f4a",
						containLabel: true
					},

					xAxis: {
						type: 'category',
						axisTick: {
							show: true,
								length:5, 
						},
						interval: 1,
						axisLabel: {
							color: "#62b292",
							fontSize:"1rem"
						},
						axisLine: {
							show: false
						},
						data: xData,
					},
					yAxis: {
						type: 'value',
						name: '',
						axisLabel: {
							textStyle: {
								//坐标轴颜色
								color: "#62b292",
								fontSize:"1rem"
							}
						},
						//坐标轴线样式
						splitLine: {
							show: true,
							lineStyle: {
								type: 'solid', //solid实线;dashed虚线
								color: "#2b5da7"
							}
						},
					},
					series: [
						{
							name: "终端",
							type: 'line',
							smooth: true, //true曲线; false折线
							itemStyle: {
								normal: {
									label : {
									show: true,
									color:'#4992ff'
									},
								}
							},
							areaStyle: {
								//折线图颜色半透明
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: 'rgba(134, 251, 192, 0.5)' // 0% 处的颜色
									}, {
										offset: 1, color: 'rgba(134, 251, 192, 0.1)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
								
							},
							data: serialData[0]
						},
						{
							name: "辅控",
							type: 'line',
							smooth: true, //true曲线; false折线
							itemStyle: {
								normal: {
									label: {
										show: true,
										color:'rgba(134, 251, 192)'
									},
								}
							},
							areaStyle: {
								//折线图颜色半透明
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: 'rgba(36,173,254, 0.5)' // 0% 处的颜色
									}, {
										offset: 1, color: 'rgba(52,112,252, 0.1)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							},
							data: serialData[1]
						}
					]
				});
				// 当我们浏览器缩放的时候，图表也等比例缩放
				window.addEventListener("resize", function() {
					// 让我们的图表调用 resize这个方法
					myChart.resize();
				});
			},

JS：获取图表数据，渲染图表

			// 报警趋势统计
			alarmTrendChart(type) {
				if(type) {
					this.time_type = type
				} else {
					this.time_type = '年'
				}
				var that = this;
				this.httpPost('admin-alarm-api/alarm-trend-statistics', {
					admin_user_id: admin_user_id,
					admin_user_token: admin_user_token,
					time_type: this.time_type
				}, function(msg, data) {
					that.gradientChart('alarm_trend',data.x_data,data.needData)
				})

				
			},

JS：年月日的切换

		mounted: function() {
			this.alarmTrendChart()
			// 年月日的切换
			var that = this
			$(".select_time").on("click", "span", function() {
				// 此时要注意这个索引号的问题
				index = $(this).index() - 1;
				// 点击当前a 高亮显示 调用active
				$(this)
				.addClass("active")
				.siblings("span")
				.removeClass("active");
				
				that.alarmTrendChart(this.dataset.type)

			});
		},