android 交错正负轴柱状图 交错正负轴标签图

文章目录

• 需求说明
• 代码及思路
• 1.负数标签右边展示，正数标签左边展示
• 2.保证0轴始终居中
• 3.完整代码(仅option)

需求说明

需求说明：公司要求做一个交错正负轴标签，要求标签名称和值块分居两边。

难点：直接使用Echarts交错正负轴标签会导致0轴标签位置不定，当负（正）数据远远小于正（负）数据时，标签左边（右边）的文字显示不出来，有遮挡。

经过改造后效果图如下：

代码及思路

该图使用的是
echars正负抽标签图

需要做两点修改：

1.负数标签右边展示，正数标签左边展示

处理思路，定义左右标签，对数据遍历处理。代码如下：

//标签格式定义（在原来的基础上再加了一个左的）
const labelRight = {
	position: 'right'
};
const labelLeft = {
	position: 'left'
};

//数据遍历
for(var i=0;i<data.length;i++){
	yData.push(data[i].name);//yData 即存放标签名称
	var obj = {};
	//xData 即存放标签值
	if (data[i].value< 0){
		obj.value=data[i].value;
		obj.label=labelRight;//值小于 0 ，标签展示在0轴右边
		xData.push(obj);
	} else {
		obj.value=data[i].value;
		obj.label=labelLeft;//值大于 0 ，标签展示在0轴左边
		xData.push(obj);
	}
}
//以下为数据加载
// 为echarts对象加载数据
var myChart = echarts.init($("chart"));
option.yAxis.data = yData;
option.series[0].data  = xData;
option.tooltip.formatter=function (params) {
    //鼠标移动时展示
	return params[0].name+"："+params[0].data.value+"%";
};		
myChart.setOption(option);

2.保证0轴始终居中

防止当负数标签少于正数标签时，标签超出长度图范围问题（注原图的0轴会根据数据自动变换位置，标签过长会导致遮挡）
思路：
计算X轴最大最小值，使最大最小值的绝对值相等，这样0轴就会保持居中。
1.当 abs(最小负数) < 最大正数时，x轴最小值为 -max(正)；
2.当 abs(最小负数) > 最大正数时，x轴最大值为 -min(负)；
代码如下：

xAxis: {
		type: 'value',
		position: 'bottom',
		splitLine: {
			lineStyle: {
				color: '#CECECE'
			}
		},
		min : function(value){
		    //最小值设置，其中-value.max * 1.05 乘以1.05 ，主要是使图的边界小于最小的值，给边界留空间
			return ( Math.abs(value.min) < value.max ? -value.max * 1.05 : value.min *  1.05).toFixed(2);
		},
		max : function(value){
		 //最大值设置，其中-value.min * 1.05 乘以1.05 ，主要是使图的边界大于最大于值，给边界留空间
			return ( Math.abs(value.min) < value.max ? value.max * 1.05 : -value.min * 1.05).toFixed(2);
		}

	},

3.完整代码(仅option)

var option = {
	grid: {
		left: '3%',   //距离左边的距离
		right: '4%', //距离右边的距离
		top: '5%' //距离上边的距离
	},
	backgroundColor: '#FBFBFB',
	tooltip : {
		trigger: 'axis',
		formatter: "{b}:{c}%",
		confine:true,
		axisPointer: {
			type: 'shadow'
		}
	},
	xAxis: {
		type: 'value',
		position: 'bottom',
		splitLine: {
			lineStyle: {
				color: '#CECECE'
			}
		},
		min : function(value){
			return ( Math.abs(value.min) < value.max ? -value.max * 1.05 : value.min *  1.05).toFixed(2);
		},
		max : function(value){
			return ( Math.abs(value.min) < value.max ? value.max * 1.05 : -value.min * 1.05).toFixed(2);
		}

	},
	yAxis: {
		type: 'category',
		axisLine: { show: false },
		axisLabel: { show: false },
		axisTick: { show: false },
		splitLine: { show: false },
		data: [],
	},
	series: [
		{
			name: 'Cost',
			type: 'bar',
			stack: 'Total',
			label: {
				show: true,
				color:'#b0b0b0',//设置字体颜色
			},
			lineStyle :{
				color: '#CECECE'
			},
			itemStyle:{//设置块颜色
			  	normal:{
			  		color:'#fc6821'
				}
			},
			data: []
		}
	]
};

以上就是解决该需要的全部内容思路，特记录。