echarts 实现柱状图左右横向对比显示
重点看代码中的注释 ： 处理负半轴的数据显示，后台传负数，代码中处理显示时为正数
接下来直接上代码
（记得引入jquery和echarts的js文件哦！）
<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>