带背景的柱形图echarts 柱状配置项内容和展示

      datas = {
    countArr: [10, 21, 30, 37],
    nameArr: ["测试1", "测试2", "测试3", "测试4"]
}
let maxNum = 50;
let bgData = [];let seriesArr = [];
let countArr2 = [];
	var lineColor = 'rgba(51, 64, 158, 0.6)';
	
	datas.nameArr.forEach( function(item,index){
		bgData.push(maxNum);
		countArr2.push(maxNum * 0.8)
	})

		seriesArr.push({
			         name: "人口类型统计",
	            type: 'bar',
	            barWidth: '15',
	           
	            itemStyle: {
	                normal: {
	                    barBorderRadius: 50,
	                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#574EFF' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#000219' // 100% 处的颜色
                }], false),
	                }
	            },
	            data: datas.countArr,
	            zlevel: 11
		})
   
		seriesArr.push({
			         name: "",
	            type: 'bar',
	            barWidth: '15',
	           barGap: '-100%',
	            itemStyle: {
	                normal: {
	                    barBorderRadius: 50,
	                    color: '#000',
	                }
	            },
	            data: countArr2,
	            zlevel: 11
		})
   
    seriesArr.push({
        name: '',
        type: 'bar',
        barWidth:100,
        barGap: '-60%',
        data: bgData,
        itemStyle: {
            normal: {
                color: 'rgba(4, 4, 30, 0.43)',
                
               borderColor:"#33409E"
            }
        },
        zlevel: 9,
        xAxisIndex: 1,
})
seriesArr = seriesArr.reverse();
 option = {
     backgroundColor:'rgba(0,0,0,0.8)',
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'line',
	            lineStyle: {
	                opacity: 0
	            }
	        },
	         formatter:  function (params) {
	            var res='<div"><p>'+params[0].name+'</p></div>' 
	            for(var i=0;i<params.length;i++){
	                if(params[i].seriesName!=""){
	                     res+='<p>'+params[i].seriesName+':'+params[i].data+'</p>'
	                }
	            }
	            return res;
	            },
	    },
	  
	    grid: {
	    	containLabel: true,
 	        left: 30,
 	        top: 80,
 	        right: 30,
 	        bottom: 50
	    },
	    xAxis: [{
	        type: 'category',
	        data: datas.nameArr,
	        axisLine: {
	             show: false
	        },
	        axisLabel: {
	            show: true,
	            margin:10,
	             color: '#AAB8FF',
	             fontSize:13,
	             interval:0,
             fontFamily:'FZLanTingHei-L-GBK',
              formatter: function (params) {
		                var newParamsName = ""; // 最终拼接成的字符串
		                var paramsNameNumber = params.length; // 实际标签的个数
		                var provideNumber = 2; // 每行能显示的字的个数
		                var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
		                /**
		                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
		                 */
		                // 条件等同于rowNumber>1
		                if (paramsNameNumber > provideNumber) {
		                  /** 循环每一行,p表示行 */
		                  for (var p = 0; p < rowNumber; p++) {
		                    var tempStr = ""; // 表示每一次截取的字符串
		                    var start = p * provideNumber; // 开始截取的位置
		                    var end = start + provideNumber; // 结束截取的位置
		                    // 此处特殊处理最后一行的索引值
		                    if (p == rowNumber - 1) {
		                      // 最后一次不换行
		                      tempStr = params.substring(start, paramsNameNumber);
		                    } else {
		                      // 每一次拼接字符串并换行
		                      tempStr = params.substring(start, end) + "\n";
		                    }
		                    newParamsName += tempStr; // 最终拼成的字符串
		                  }
		                } else {
		                  // 将旧标签的值赋给新标签
		                  newParamsName = params;
		                }
		                //将最终的字符串返回
		                return newParamsName;
		              },
            
	        },
	        boundaryGap:true,
	          axisTick: {
	                show: false
	            },
	           
	    },{
	        type: 'category',
	        data: datas.nameArr,
	        axisLine: {show:false},
	        axisLabel: {
	            show: false,
	        },
	        boundaryGap:true,
	        
	    }],
	    yAxis: [{
	            type: 'value',
	            splitLine: {
	                show: false
	            },
	            axisTick: {
	                show: false
	            },
	           
	            axisLine: {
	                 show: false
	            },
	            axisLabel: {
	                 show: false
	                
	            },
	        },
	       
	    ],
	    series:seriesArr
	};