echarts双折线图

样式如下

话不多说上案例(案例中已经为大家注释解释清楚代码的具体功能了，不要的可以删改)
（因为自己手打的，本人比较菜可能括号神马的会有报错哦体谅一下）

<template>
	<div>
		<div id="double" style="width: 800px;height: 520px;"></div>//⭐必须写宽高
	</div>
</template>
<script>
export default {
mounted() {⭐
		this.getDouble()	
	},
methods:{
getDouble() {
				var echart = this.$echarts.init(document.getElementById("double"))//⭐
				var option = {
					title: {},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
						}
					},
					legend: {
						data: ['Direct', 'Search Engine']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['3月', '4月', '5月', '6月', '7月', '8月'],
						axisTick: { //y轴刻度线
							show: false
						},
						//x轴数字颜色
						axisLine: {
							lineStyle: {
								color: '#c1c1c1',
								width: 1, //这里是为了突出显示加上的
							}
						},
					},
					yAxis: {
						type: 'value',
						//多条横线轴颜色
						splitLine: {
							show: true,
							lineStyle: {
								color: ['#315070'],
								width: 1,
								type: 'solid'
							}
						},


						axisLine: {
							lineStyle: {
								color: '#c1c1c1',
								width: 1, //这里是为了突出显示加上的
							}
						},
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '10%',
						top: '10%',
						containLabel: true
					},
					series: [{
							name: '注册用户',
							type: 'line',
							stack: 'Total',
							//折点处提示数值
							label: {
								show: true,
								position: 'buttom',
								textStyle: {
									color: "#f85336",
									fontSize: 12
								}
							},
							symbolSize: 2, //折点大小
							data: [200, 120, 90, 150, 170, 180],

							itemStyle: {
								normal: {
									color: '#c23531', //折点颜色
									lineStyle: {
										color: '#c23531' //折线颜色
									}
								}
							},
							//线下阴影
							areaStyle: {
								normal: {
									color: {
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0,
											color: "#072948" // 0% 处的颜色
										}, {
											offset: 0.7,
											color: "#072948" // 100% 处的颜色
										}],
										globalCoord: false // 缺省为 false
									}
								}
							},

						},
						{
							name: '活跃用户',
							type: 'line',
							//折点处提示数值
							label: {
								show: true,
								position: 'buttom',
								textStyle: {
									color: "#fff",
									fontSize: 12
								}
							},
							stack: 'Total',
							symbolSize: 2, //折点大小
							//折点处提示数值

							data: [100, 220, 180, 210, 120, 120],
							itemStyle: {
								normal: {
									color: '#e5e5e5', //折点颜色
									lineStyle: {
										color: '#fff' //折线颜色
									}
								}
							},
							//线下阴影
							areaStyle: {
								normal: {
									color: {
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0,
											color: "#689f9d" // 0% 处的颜色
										}, {
											offset: 0.7,
											color: "#689f9d" // 100% 处的颜色
										}],
										globalCoord: false // 缺省为 false
									}
								}
							},
						}
					]
				}
				echart.setOption(option)
			},
	}
}
</script>