【Echarts交错正负轴标签】使用 -- 0轴始终在正中位置

需求说明

需求说明：公司要求做一个交错正负轴标签，要求标签名称和值块分居两边。
难点：直接使用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: []}]
};

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