echars重叠柱状图

echars叠加柱状图的使用

 var myChart1 = this.$echarts.init(document.getElementById('powerBar'));
		  let option1 = {
			title : {
				subtext : '执行次数',
				subtextStyle : {
					'color' : '#6E6E6E',
					'fontStyle' : 'normal',
					'fontWeight' : 'lighter',
					'fontSize' : 14,
					'verticalAlign' : 'middle',
				},
				left : '10%',
			},//标题属性
			tooltip : {
				trigger: 'axis',
				axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			legend: {
				data: ['成功次数', '失败次数'],
				left: '60%',//距离左侧的百分比
			},
			grid: {
				left: '10%',
				right: '10%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				name : '操作类型',//x轴说明
				type: 'category',
				data: this.typesData,
			},
			yAxis:  {
				type: 'value',
				splitLine:{
					show:true,
					lineStyle:{
						color:'#DCDCDC',
						width: 1,
						type: 'dotted',//虚线

					},
				},
				splitNumber: 10,//y轴分割段数
			},
			series: [
				{
					name: '成功次数',
					type: 'bar',
					stack: '次数',
					barWidth : 20,
					itemStyle:{
						normal: {
							//柱形图圆角，初始化效果
							color:'#d48265',
							//barBorderRadius:[0, 10, 10, 0],
							label: {
								show: true,//是否展示
								textStyle: {
									fontWeight:'bolder',
									fontSize : '12',
									fontFamily : '微软雅黑',
								}
							}
						},
					},
					label: {
						normal: {
							show: true,
							position: 'insideRight'
						}
					},
					data: this.successData
				},
				{
					name: '失败次数',
					type: 'bar',
					stack: '次数',
					barWidth : 20,
					itemStyle:{
						normal: {
							//柱形图圆角，初始化效果
							color:'#91c7ae',
							barBorderRadius:[10, 10, 0, 0],
							label: {
								show: true,//是否展示
								textStyle: {
									fontWeight:'bolder',
									fontSize : '12',
									fontFamily : '微软雅黑',
								}
							}
						},
					},
					label: {
						normal: {
							show: true,
							position: 'inside'
						}
					},
					data: this.failData,
				},
			]
		};
    myChart1.setOption(option1);