1.效果图
2.配置参数
option = { title: { text: '世界人口总量', subtext: '数据来自网络' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', axis :'y', Z:10 }, formatter:function(params){ var relVal = '<span style="color:#333">'+params[0].name+'</span><br/>' params.forEach(item => { if ( item.seriesIndex<3) { relVal +='<br/><span style="color:#999">' + item.seriesName + ':</span><span style="color:#333">' + item.value+'</span>'; } }) return relVal }, backgroundColor:'#fff', padding:[5,10], }, legend: { data: ['2011年', '2012年'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: [{ type: 'category', data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'] }, { type: 'category', axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, axisPointer: { type: 'none', }, splitArea: { show: false }, splitLine: { show: false }, data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'] }], series: [ { name: '2011年', type: 'bar', data: [18, 23, 29, 10, 34, 63], markLine : { symbol:"none", itemStyle: { normal: { color:'#FA8565', label: { show:false } } }, data : [{ xAxis: 100, silent:true, }] } }, { name: '2012年', type: 'bar', data: [193, 23, 31, 12, 13, 68] }, { name: "123", stack: 'breakevenEleGroup',/*数据组,需要设置才能将两个bar堆积在一起*/ type: 'bar', yAxisIndex: 1, itemStyle: { normal: { color: 'rgba(0,0,0,0)',/*设置bar为隐藏,撑起下面横线*/ } }, data: [12,17,20,3,33,18] }, { /*这个bar是横线的显示*/ name: "123", stack: 'breakevenEleGroup',/*数据组,需要设置才能将两个bar堆积在一起*/ type: 'bar', yAxisIndex: 1, itemStyle: { normal: { color: 'red' } }, data: [0.2,0.2,0.2,0.2,0.2,0.2], }, { name: "123", stack: 'breakevenEleGroup2',/*数据组,需要设置才能将两个bar堆积在一起*/ type: 'bar', yAxisIndex: 1, itemStyle: { normal: { color: 'rgba(0,0,0,0)',/*设置bar为隐藏,撑起下面横线*/ } }, data: [0,0,0,0,0,0] }, { /*这个bar是横线的显示*/ name: "123", stack: 'breakevenEleGroup2',/*数据组,需要设置才能将两个bar堆积在一起*/ type: 'bar', yAxisIndex: 1, itemStyle: { normal: { color: 'red' } }, data: [0,0,0,0,0,0], } ] };