$(function(){
charts0 = echarts.init(document.getElementById('charts0'),'light');
chartsColumnOptions1(charts0, result.income,result.dataYear + '年收入', '万', incomeRate,profit,orgname+'年收入');
});
/*柱状双柱*/
function chartsColumnOptions1(containerid, data1, title1, unit, data2,data3,orgname ) {
const hasNegative = Math.min(...data3);
if(hasNegative < 0){
option = {
color: ['#61a0a8','#FF6600','#c23531'],
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'cross',
crossStyle : {
color : '#999'
}
}
},
legend : {
data : [title1,'净利润' , '完成率%'],
show:true
},
xAxis : [ {
type : 'category',
data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
axisPointer : {
type : 'shadow'
},
splitLine:{
show:false
}
} ],
yAxis : [ {
type : 'value',
name : orgname + '('+unit+')',
//min: 0,
//max: 100000,
//interval: 500,
max: value => {
const { max, min } = value;
const absMax = Math.max(Math.abs(max), Math.abs(min));
return Math.floor(absMax * 1.2);
} ,
min: value => {
const { max, min } = value;
const absMax = Math.max(Math.abs(max), Math.abs(min));
return Math.floor(-absMax * 1.2);
} ,
axisLabel : {
formatter : '{value} '
},
splitLine:{
show:false
}
},{
type : 'value',
name : '完成率',
max:200,
min:-200,
interval : 50,
axisLabel : {
formatter : '{value} %'
},
splitLine:{
show:false
}
} ],
series : [ {
name : title1,
type : 'bar',
barWidth:15,
barGap:'0%',
data : data1,
itemStyle: {
normal: {
label : {show:true,position:'top',formatter:'{c}'},
color:"#61a0a8",
textStyle: {
color:"#61a0a8"
}
/* color: function(params) {
//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
var colorList = ['#61a0a8'];
return colorList[params.dataIndex]
} */
}
}
},{
name : '净利润',
type : 'bar',
barWidth:15,
//data: [1200.0, 2200.2, 3000.3, 4000.5, 1600.3, 1100.2, 0, 0, 0, 0, 0, 0],
data:data3,
itemStyle: {
normal: {
color:"#FF6600",
textStyle: {
color:"#FF6600"
}
/* color: function(params) {
//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
var colorList = ['#FF6600'];
return colorList[params.dataIndex]
} */
}
}
}, {
name : '完成率%',
type : 'line',
//symbol:'none', //去掉折线图中的节点
smooth : true, //true 为平滑曲线,false为直线
yAxisIndex : 1,
//data: [12.0, 22.2, 33.3, 44.5, 56.3, 110.2, 20.3, 23.4, 23.0, 86.5, 72.0, 96.2]
data : data2,
itemStyle : {
normal : {
color:'#c23531',
lineStyle:{
color:'#c23531'
}
}
},
/* markLine : {
data: [
{
name: '完成标准',
yAxis: 100
}
]
} */
} ]
};
}else{
option = {
color: ['#61a0a8','#FF6600','#c23531'],
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'cross',
crossStyle : {
color : '#999'
}
}
},
legend : {
data : [title1,'净利润' , '完成率%'],
show:true
},
xAxis : [ {
type : 'category',
data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
axisPointer : {
type : 'shadow'
},
splitLine:{
show:false
}
} ],
yAxis : [ {
type : 'value',
name : orgname + '('+unit+')',
min: 0,
//max: 100000,
//interval: 500,
axisLabel : {
formatter : '{value} '
},
splitLine:{
show:false
}
},{
type : 'value',
name : '完成率',
max:200,
min:0,
interval : 50,
axisLabel : {
formatter : '{value} %'
},
splitLine:{
show:false
}
} ],
series : [ {
name : title1,
type : 'bar',
barWidth:15,
barGap:'0%',
data : data1,
itemStyle: {
normal: {
label : {show:true,position:'top',formatter:'{c}'},
color:"#61a0a8",
textStyle: {
color:"#61a0a8"
}
/* color: function(params) {
//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
var colorList = ['#61a0a8'];
return colorList[params.dataIndex]
} */
}
}
},{
name : '净利润',
type : 'bar',
barWidth:15,
//data: [1200.0, 2200.2, 3000.3, 4000.5, 1600.3, 1100.2, 0, 0, 0, 0, 0, 0],
data:data3,
itemStyle: {
normal: {
color:"#FF6600",
textStyle: {
color:"#FF6600"
}
/* color: function(params) {
//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
var colorList = ['#FF6600'];
return colorList[params.dataIndex]
} */
}
}
}, {
name : '完成率%',
type : 'line',
//symbol:'none', //去掉折线图中的节点
smooth : true, //true 为平滑曲线,false为直线
yAxisIndex : 1,
//data: [12.0, 22.2, 33.3, 44.5, 56.3, 110.2, 20.3, 23.4, 23.0, 86.5, 72.0, 96.2]
data : data2,
itemStyle : {
normal : {
color:'#c23531',
lineStyle:{
color:'#c23531'
}
}
},
/* markLine : {
data: [
{
name: '完成标准',
yAxis: 100
}
]
} */
} ]
};
}
<div class="col-lg-5 col-md-5">
<div class="card" style="min-height: 560px" data-background="color"
data-color="grey">
<div id="charts0" style="height: 200px"></div>
</div>
</div>