echart-柱状图

 目前在改别人遗留的bug,需求：

宽度 自适应的情况下 展示不友好：宽度太大

上下不居中 需求 要 上下 无论是否 有内容 都要居中展示 以0刻度为标准

 

宽度 设置

	series: [
				{
					name: '已付金额',
					type: 'bar',
					stack: 'one',
					color:'#7198d2',
					itemStyle: itemStylet,
					barCategoryGap:10,
					data: data1,
					barWidth:15  宽度15规定
				},
				{
					name: '未付金额',
					type: 'bar',
					stack: 'one',
					color:'#f09266',
					itemStyle: itemStylett,
					barCategoryGap:10,
					data: data2
				}
			]

　　

高度调整

原理：给 y轴 设置 最大值 ，最小值，最大值和最小值 为 数据中 最大值的绝对值  这样 canvas就会基于 0刻度线居中

		yAxis: {
				axisLabel:{
					formatter:function (value, index) {
						if(value<0){
							return -value;
						}else{
							return value;
						}
					}
				},
				min:-getMaxMin(data1,data2),
				max:getMaxMin(data1,data2)
			},

　　

var data1 = [400,400,400,400];
var data2 = [-400,-6000,-600,-1000,];

	var num=0;
		function getAbcArr(data2) {
			var arr=[];
			$.each(data2,function (i, v) {
				arr.push(Math.abs(v))
			})
			return arr
		}
		function getMaxMin(data1, data2) {
			var arr=data1.concat(getAbcArr(data2));
			return Math.max.apply(null,arr)
		}
		getMaxMin(data1,data2)

　　

最后的效果图

 

　

 

 新bug ,明明没有设置最后一个x轴加粗，显示出来就是加粗了

 

后来检查 发现时 这里的问题 

 

interval: 0,// 0 强制显示所有，1为隔一个标签显示一个标签，2为隔两个

 axisLabel:{
                        interval: 0,// 0 强制显示所有，1为隔一个标签显示一个标签，2为隔两个
                        rotate: -25,//标签旋转角度，在标签显示不下的时可通过旋转防止重叠
                        textStyle: {
                            fontSize: 10,//字体大小
                        }
                    },

　　

 由于字体比较多 所以对x轴显示 做了一些 配置 而interval：0导致了 这个bug

这里 把这个直接注释 就可以解决，默认都显示。

 

转载于:https://www.cnblogs.com/GoTing/p/11083850.html