echars双柱图

$(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>

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值