复合:
var option = {
color:["#7179CB","#4CCEFE"],
title: {
text:"统计总量",
textStyle:{
fontSize:16,
padding:"10px"
}
},
legend: {
data: ["总量", "分量"],
},
tooltip: {},
xAxis: {
data: ['a','b','c','d']
},
yAxis: {
splitArea: {show: false}
},
series: [
{
barWidth: 20,
data: ["147", "159", "195", "124",],
name: "总量",
type: "bar",
itemStyle: {
normal: {
color: 'rgba(0,255,0,0.4)',
label: {
show: true, //开启显示
position: [30,0], //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
},
},
{
barGap: "-100%", /*这里设置包含关系,只需要这一句话*/
barWidth: 20,
data: ["100", "124", "143", "150", ],
name: "分量",
type: "bar",
itemStyle: {
normal: {
color: 'rgba(46,139,87,0.4)',
label: {
show: true, //开启显示
position: [30,0], //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
},
}
]
};
2.复合重合
var dataMoney = [0, 20, 40, 60, 80, 100, 120, 140, 160];//y轴
var dataMouth = ['1月','2月','3月','4月'];//x轴
//显示数据,可修改
var data1 = [22, 24, 38, 43];
var data2 = [135, 146, 143, 59];
//总计
var data3 = function() {
var datas = [];
for (var i = 0; i < data1.length; i++) {
datas.push(data1[i] + data2[i]);
}
return datas;
}();
option = {
title: {
text: '标题栏',
left: 'center',
top: 'top',
},
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
legend: {
orient: 'vertical',
x: 'right',
y: 'top',
data:['料费','工费']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : dataMouth,
}
],
yAxis : [
{
type : 'value',
data : dataMoney //可省略,只要type : 'value',会自适应数据设置Y轴
}
],
series : [
{
barGap: "-100%", /*这里设置包含关系,只需要这一句话*/
barWidth: 20,
data: ["100", "124", "143", "150", ],
name: "分量",
type: "bar",
itemStyle: {
normal: {
color: 'rgba(46,139,87,0.4)',
label: {
show: true, //开启显示
position: [30,0], //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
},
},
{
name:'料费',
type:'bar',
stack:'sum',
itemStyle:{
normal:{
label: {
show: true,//是否展示
},
color:'#F89733'
}
},
data:data1
},
{
name:'工费',
type:'bar',
stack:'sum',
barWidth : 20,
itemStyle:{
normal:{
label: {
show: true,//是否展示
},
color:'#DF7010'
}
},
data:data2
},
{
name: '总计',
type: 'bar',
stack: 'sum',
label: {
normal: {
// offset:['50', '80'],
show: true,
position: 'insideBottom',
formatter:'{c}',
textStyle:{ color:'#000' }
}
},
itemStyle:{
normal:{
position: [30,0], //在上方显示
color:'rgba(128, 128, 128, 0)'
}
},
data: data3
}
]
};
复合调整数字显示位置
var dataMoney = [0, 20, 40, 60]; //y轴
var dataMouth = ['第一个月', '第二个月', '第三个月', '第四个月']; //x轴
//显示数据,可修改
var data1 = [500, 600, 500, 200]; //实际收入
var data2 = [100, 0, 0, 0]; //超额完成
var data4 = [500, 800, 1000, 600]; //未完成
//总计
var data3 = function() {
var datas = [];
for (var i = 0; i < data1.length; i++) {
datas.push(data1[i] + data2[i]);
}
return datas;
}();
// 显示标题,图例和空的坐标轴
option ={
title: {
// text: '销售'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
y: '3%',
x: '20%',
data: ['实际收入', '超额完成', '未完成'],
textStyle: {
color: '#808080' //字体颜色
},
itemWidth: 12,
itemHeight: 12,
itemWidth: 12,
itemHeight: 12,
},
grid: {
left: '2%',
right: '7%',
bottom: '6%',
top: '15%',
containLabel: true,
},
xAxis: [{
type: 'category',
data: dataMouth,
}],
yAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#E3E3E3'
}
},
},
series: [{
barGap: "-100%",
/*这里设置包含关系,只需要这一句话*/
barWidth: "13%",
data: data4,
name: "未完成",
type: "bar",
itemStyle: {
normal: {
color: '#E9E9E9',
label: {
show: true, //开启显示
position: ['130%', '0%'], //在上方显示
textStyle: { //数值样式
color: 'rgba(128, 128, 128, 0.8)'
}
}
}
},
},
{
name: '实际收入',
type: 'bar',
stack: 'sum',
barWidth: "13%",
color: "#30D39C",
data: data1,
itemStyle: {
normal: {
label: {
show: false, //是否展示
},
}
}
}, {
name: '超额完成',
type: 'bar',
stack: 'sum',
data: data2,
color: "#1BA778",
barWidth: "13%",
itemStyle: {
normal: {
label: {
show: false, //是否展示
},
}
}
}, {
name: '总计',
type: 'bar',
stack: 'sum',
label: {
normal: {
// offset:['50', '80'],
show: true,
// position: 'outsideBottomRight',
// position: 'insideBottomRight',
position: ['130%','100%'],
// distance:-25,
formatter: '{c}',
textStyle: {
color: '#000'
}
}
},
itemStyle: {
normal: {
// position: [30,0], //在上方显示
color: 'rgba(128, 128, 128, 0)'
}
},
data: data3
}
]
};