条形图(带底色+数值)echarts 柱状配置项内容和展示

配置项如下
          var chartData = [762,737,634,530,426,323,219,114,101,69];
	var chartName = ['192.168.2.132','192.168.2.133','192.168.2.134','192.168.2.135','192.168.2.136','192.168.2.137','192.168.2.138','192.168.2.139','192.168.2.130','192.168.2.129'];
	
	var max = Math.max.apply(null,chartData);
	var emptyData = chartData.map(function(v, i) {
	    var item = {
	        value: max,
	        label: {   //右边数值
	            formatter: '{a|' + v + '}',
	            position: 'right',
	            rich: {
	                a: {
	                    color:'#3eb4fa',
	                    fontSize:16,
	                    padding:[5, 10]
	                }
	            }
	        }
	    }
	    return item
	})

	option = {
	    backgroundColor: '#061330',
	    tooltip: {
		    show: true,
		    trigger: 'item',
		    formatter: function(params, ticket, callback){
		        var res = "";
				var name = chartName[params.dataIndex];
				var value =chartData[params.dataIndex]
				res = name + "<br />访问量:" + value;
				return res;
		    },
		},
	    grid: {
	        top: '10%',
	        right: '10%',
	        left: '10%',
	        bottom: '10%',
	        containLabel: true
	    },
	    xAxis: [
		    {
	            show: false,
	        },{
	            type : 'value',
	            axisLabel:{      //坐标轴字体颜色
	            	show:false,
	            },
	            axisLine:{
	            	show:false,
	            	lineStyle: {
		                color: 'rgba(255,255,255,0.12)'
		            }
	            },
		        axisTick:{       //y轴刻度线
		            show:false
		        },
	            splitLine:{    //网格
	            	show: false,
	            },
	            max: function(value) {
		            return value.max
		        },
		    }
        ],
	    yAxis: [{
	        type: 'category',
	        show: true,
	        inverse: true,
	        data:chartName,
	        axisTick:{       //y轴刻度线
	           show:false
	        },
	        axisLabel: {
	            formatter: '{value}',
	            color: '#6fa7e0',
	            fontSize:16
	        },
        	axisLine: {
        		show:false,
	        },
	        splitLine: {
	            show:false
	        },
	    },
	    {
	        type: "category",
	        name: "",
	        axisTick: {
	            show: false
	        },
	        splitLine: {
	            show: false
	        },
	        axisLabel: {
	            show: false
	        },
	        axisLine: {
	            show: false
	        },
	        inverse: true,
	        data: chartName
	    }],
	    series: [
	       	{
	            type: 'bar',
	            barWidth: '30%',
	            yAxisIndex: 1,
            	silent:true,
	            itemStyle: {
	                normal: {
	                    color: 'rgba(7, 36, 74, 0.6)',
	                    barBorderRadius: [20,20],
	                }
	            },
	            label: {
	                show:true,
	            },
	            data: emptyData
	        },{
	            show: true,
	            type: 'bar',
	            barWidth: '35%',
	            z: 2,
	            label: {
	                show: false,
	            },
	            itemStyle: {
					normal: {
		                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
		                    offset: 0,
		                    color: '#347ce9' // 0% 处的颜色
		                }, {
		                    offset: 1,
		                    color: '#28c3db' // 100% 处的颜色
		                }], false),
		                barBorderRadius: [20,20],
		            }
	            },
	            data: chartData,
	       	}
	    ]
	};
    
    
截图如下