重点看代码中的注释 ： 处理负半轴的数据显示，后台传负数，代码中处理显示时为正数
接下来直接上代码
（记得引入jquery和echarts的js文件哦！）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>对比柱状图</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script></head><body> <div class="container"> <div id="barLeft" style="width:500px;height:500px;"></div> </div> <script type="text/javascript"> var chart = echarts.init(document.getElementById('barLeft')); option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { data:['支出','收入'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'value', splitLine:{ show:false }, //横坐标的负半轴的 "坐标轴" 上显示是正数 axisLabel:{ show:true,//不显示坐标轴的数字 formatter:function(value){ if (value<0) { return -value; } } } } ], yAxis : [ { show:true,//纵坐标显示 type : 'category', position:'left',//纵向坐标显示位置 可选为：left | right axisTick : {show: false}, splitArea : {show : true}, splitLine:{ show:false//网格线不显示 }, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], color: ['#66CC99','#CC66CC'], series : [ { name:'收入', type:'bar', stack: '总量', label: { normal: { show: true } }, data:[320, 302, 341, 374, 390, 450, 420] }, { name:'支出', type:'bar', stack: '总量', label: { normal: { show: true, /* *处理横坐标负半轴这边的 "柱状" 显示的数 *后台传过来是负数，显示时是正数 */ formatter: function (value) { if(value.data<0){ return -value.data; } }, } }, data:[-120, -132, -101, -134, -190, -230, -210] } ] }; chart.setOption(option); </script></body></html>