echart插件--柱狀圖正負柱使用配置

一、bug記錄：

1.yAxis中 boundaryGap:false, //坐標軸兩邊留白策略這個參數設置false時  表示柱狀圖和坐標軸無縫銜接，會出現當鼠標放在最下面和最上面的兩個柱狀圖時，柱狀圖隱藏的狀態，不知道為啥，但是就是這個配置導致的，刪掉或者true就好了。

2.echart中toolTip是div   設置的層級z-index:9999999;所以自定義彈窗要記得設置z-index要大於toolTip的層級。

 

二、使用過程中配置的使用記錄：

1.設置柱狀圖和y軸有一定的距離，如下圖所示柱狀圖與Y軸距離太近

解決：xAxis：{boundaryGap:true,}//是否與坐標軸之間留白  默認是true  當時解決多列title顯示不全的時候設置了false  導致問題出現，改成false即可。

下面X軸文字想要調整與y軸的距離：textStyle: {padding:[0,0,0,20]}  設置padding的值就可以了准尋上右下左的規律

2，標簽過多顯示不全的問題：

方法a:文字傾斜

 axisLabel: {//解決標簽過多顯示不全

interval:0,
 rotate:30,
 }

方法2：文字豎排顯示

axisLabel: {
    interval: 0,
    formatter:function(value)
    {
        return value.split("").join("\n");
    }
},

3.正負柱顯示單位時要和x軸顯示位置一致，如上圖所示

解決：

  xAxis: {
					   type : 'category',
					   name:"/月",
					   nameLocation:"middle",
					   nameGap:-10, //組合起來控制name的位置
					   nameTextStyle:{
						   //定位坐標軸名稱位置，獲取當前echart的div的寬度減去合理的值
						   padding:[0,0,0,$("#year_revenue_echart").width()-80]  
					   },
					}

　　

相對完整的代碼如下所示

1.需求實現圖：正負柱不同顏色顯示，並且未到最大值的 用陰影補全顯示。

代碼實現：

 <div class="echart">
			<div id="totle_revenue_echart" style="width: 100%;height:300px;"></div>
			<div id="year_revenue_echart" style="width: 100%;height:300px;"></div>
 </div>

　　

			   // 初始化echart
			   var totle_revenue_echart = echarts.init(document.getElementById("totle_revenue_echart"));
			   var option = {
				   tooltip : {//懸浮窗設置
					   trigger: 'axis',
					   formatter:function(params) {//自定義文字提示
						   return params[0].name+"<br />"+"總收益："+params[0].value;
						},
					   axisPointer : {            // 坐標軸指示器，坐標軸觸發有效
						   type : 'shadow', // 默認為直線，可選為：'line' | 'shadow'
						   lable:{
							textShadowColor:"red",
							width:"1px",
						    height:"1px"
						  },
						  shadowStyle:{
							  shadowOffsetX:0.5,
							  shadowOffsetY:0.5,
							  shadowBlur:0.5,
							  opacity:0.5
						  },
						  
					   }
				   },
				   grid: {//設置表格的位置
					   top: "15px",
					   left:"-10px",
					   containLabel: true
				   },
				   xAxis: {
					   show:false
				   },
				   yAxis: {//y軸線
					   type : 'category',
					   left:"0",
					   axisLine: {
						   show: true,
						   onZero:true,
						   lineStyle:{
							   color:"#E9ECED",
						   }
					   },
					   axisTick: {show: false},//刻度線
					   axisLabel: {
							show:true,
						   // interval:0,//解決標簽過多顯示不全
						   // rotate:30,
						    align:'left',
							margin:60,
						    formatter:function (data,i) {//自定義設置y軸刻度名
							   var arry =[100,30,200,-50,20];
							   return data+" "+arry[i];
						   }
					   },
					   data:["現金","股票","理財","兩融","期權"],
					   nameGap:30,
					   inverse:false,//坐標軸名稱是否反相顯示
					   boundaryGap:false, //坐標軸兩邊留白策略(解決坐標軸名字顯示不全)
					   axisPointer:{
						   show:true,
						   lable:{
							   show:true,
							   precision:2,
							   formatter:function(data){
								  console.log(data);
							   }
							 }  
					   }
				   },
				   series : [
					   {
						   name:"直接",
						   type:'bar',
						   stack:"one",
						   data:[9,8,-7,8,4],
						   barWidth : "15px",//設置條寬度
						   //配置樣式
						   itemStyle: {
							   //通常情況下：
							   normal: {
								   // barBorderRadius: [0,4,4,0],
								   color: function (data) {//設置正負顏色值
									   return data.value>=0?"#E82724":"#00A212";
								   }
							   }
						   }
					   },
						{
						   name:"間接",
						   type:'bar',
						   stack:"one",
						   data:[0,1,0,1,5],
						   barWidth : "15px",//設置條寬度
						   //配置樣式
						   itemStyle: {
							   //通常情況下：
							   normal: {
								   // barBorderRadius: [0,4,4,0],
								   color: "#E9ECED"
							   }
						   }
					   },{
						   name:"補充",
						   type:'bar',
						   stack:"one",
						   data:[-7,-7,9,-7,-7],
						   barWidth : "15px",//設置條寬度
						   //配置樣式
						   itemStyle: {
							   //通常情況下：
							   normal: {
								   // barBorderRadius: [0,4,4,0],
								   color: "#E9ECED"
							   }
						   }
					   },
				   ]
			   };
			   totle_revenue_echart.setOption(option);//添加數據
		   

　2.柱狀圖：柱狀圖顯示，軸線刻度名稱太長時也要顯示，單位加上

代碼實現：

//年度收益額走勢
               // 初始化echart
               var year_revenue_echart = echarts.init(document.getElementById("year_revenue_echart"));
              
               option = {
                   tooltip : {
                       trigger: 'axis',
                       axisPointer : {            // 坐標軸指示器，坐標軸觸發有效
                           type : 'shadow',        // 默認為直線，可選為：'line' | 'shadow'
                       },
                       formatter:function(params) {
                            console.log("params:",params[0]);
                            return params[0].name+"月<br />"+"總收益："+params[0].value;
                        }
                    },
                   xAxis: {
                       type : 'category',
                       name:"/月",
                       // nameLocation:"end",
                       nameTextStyle:{
                           //定位坐標軸名稱位置，和使用css中的padding功能一樣
                           padding:[0,0,0,-10]   
                       },
                       axisLine: {show: false},
                       axisTick: {show: false},
                       // data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月","單位：元"],
                       data: [1,2,3,4,5,6,7,8,9,10,11,12],
                       boundaryGap:false,
                         axisLabel: {
                          show: true, //坐標軸的文字是否顯示
                          // interval:0,  
                          // rotate:30 ,
                          textStyle: {
                            color: '#222', //坐標軸上的字體顏色
                            fontSize:'12' // 坐標軸字體大小
                          }
                        },
                        
                   },
                   grid: {//設置表格位置
                       top: "36px",
                       left:"10%",
                       containLabel: true
                   },
                   yAxis: {
                       name:"單位：元",
                       nameTextStyle:{
                           color:"black",
                           padding:[0,24,-10,0]                   
                       },
                       axisLine: {show: false},
                       axisTick: {show: false}
                   },
                   series: [{
                       name: '收益額',
                       type: 'bar',
                       data: [5000, 2772, 3006, 2210, 1770, 2420,4566, 2370, 3006, 2570, 1770, 2420],
                       barWidth : "10px",//設置條寬度
                       //配置樣式
                       itemStyle: {
                           normal: { //通常情況下：
                               barBorderRadius: [4, 4, 0, 0],//設置圓角
                               color: function (data) {//設置正負顏色值
                                   return data.value>=0?"#E82724":"#00A212";
                               }

　　　　　　　　　　　　　　　　// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{//為柱狀圖設置漸變色
　　　　　　　　　　　　　　　　　　　　// offset: 0,
　　　　　　　　　　　　　　　　　　　　// color: "#FF6969" // 0% 處的顏色
　　　　　　　　　　　　　　　　　　// }, {
　　　　　　　　　　　　　　　　　　　　// offset: 1,
　　　　　　　　　　　　　　　　　　　　// color: "#FF3838" // 100% 處的顏色
　　　　　　　　　　　　　　　　// }], false)

                           }
                       }
                   }]
               };
               year_revenue_echart.setOption(option);//添加數據
               // year_revenue_echart.showLoading();//數據加載的時候loading