echarts 通用线性渐变堆叠面积图

echarts 通用线性渐变堆叠面积图

		getLineData2() {
			const myChart = echarts.init(this.$refs.chartDom);
			const option = {
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					show: false,
					textStyle: {
						fontSize: 14, //字体大小
						color: '#ffffff', //字体颜色
					},
					data: ['AAA', 'BBB'],
				},
				grid: {
					show: true,
					left: '10%',
					top: '15%',
					right: '10%',
					bottom: '13%',
				},
				xAxis: {
					data: ['项目1', '项目2', '项目3', '项目4', '项目5', '项目6'],
					axisLabel: {
						//y轴文字的配置
						textStyle: {
							color: '#ffffff',
						},
					},
					axisLine: {
						show: true,
						// 坐标轴轴线样式设置
						lineStyle: {
							color: '#335B7E',
						},
					},
				},
				yAxis: [
					{
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#335B7E',
							},
						},

						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: '#ffffff',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#335B7E',
							},
						},
					},
					{
						type: 'value',
						splitLine: {
							show: false,
						},
						axisLabel: {
							formatter: '{value} %',
							//y轴文字的配置
							textStyle: {
								color: '#ffffff',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#335B7E',
							},
						},
					},
				],
				series: [
					{
						name: 'AAA',
						type: 'line',
						smooth: true,
						stack: 'Total',
						lineStyle: {
							width: 1,
							color: '#39BFFA',
						},
						areaStyle: {
							opacity: 0.8,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgb(128, 255, 165)',
								},
								{
									offset: 1,
									color: 'rgb(1, 191, 236)',
								},
							]),
						},
						emphasis: {
							focus: 'series',
						},
						data: [20, 12, 20, 34, 90, 30],
					},
					{
						name: 'BBB',
						type: 'line',
						stack: 'Total',
						lineStyle: {
							width: 1,
							color: '#39BFFA',
						},
						smooth: true,
						areaStyle: {
							opacity: 0.8,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgb(0, 221, 255)',
								},
								{
									offset: 1,
									color: 'rgb(77, 119, 255)',
								},
							]),
						},
						emphasis: {
							focus: 'series',
						},

						data: [10, 52, 200, 334, 390, 330],
					},
				],
			};

			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},