双向BAR图

2019独角兽企业重金招聘Python工程师标准>>>

var option = {
				
				title : {
					text : '所有癌症新发病例统计-性别分布',
					textStyle : {
						fontSize : 13,
					},
					x : 'center',
				},
				tooltip : {
			        trigger: 'axis',
			        axisPointer : {            
			            type : 'shadow'
			        },
			        formatter : function(params){
			        	
			        	var city = params[1][1];
			        	
			        	var index = areaList.indexOf(city);
			        	
			        	var str = city + "<br>" + "女性新发病例："+Math.abs(femaleinc[index])+"千人<br>"+"男性新发病例："+maleinc[index]+"千人";
			        	
			        	return str;
				    }
			    },
			    legend: {
			        data:[ '女性','男性' ],
			        y : 20
			    },
			    grid : {
					x : 80,
					x2 : 110,
					y2 : 200,
				},
			    calculable : true,
			    xAxis : [
			        {	
			        	name : '新发病例(千人)',
			            type : 'value',
			            position : 'top',
			            nameTextStyle:{
			            	fontSize : 11
			            },
			            axisLabel : {
			                formatter: function(params){
			                	return Math.abs(params);
			                }
			            },
			            boundaryGap : [0, 0.01],
			        }
					    ],
			    yAxis : [
			        {	
			            type : 'category',
			            data : areaList,
			            axisTick : {
			            	show : false
			            },
			            splitLine: {show:false},
			            axisLabel: {
		                    interval:0
		                },
			        }
			    ],
			    series : [
			        {
			            name:'男性',
			            type:'bar',
			            stack: '总量',
			            barWidth : 10,
			            itemStyle: {normal: {
			                label : {show: false}
			            }},
			            data:maleinc
			        },
			        {
			            name:'女性',
			            type:'bar',
			            stack: '总量',
			            itemStyle: {normal: {
			                label : {show: false, position: 'left'}
			            }},
			           data:femaleinc
			        }
			    ]
			};

效果图

注:

1.有一边的数值为负数

2.提示框若显示正数,需用函数来修正

转载于:https://my.oschina.net/Tsher2015/blog/821543