在使用echarts做图表时，UI给了一个这样的设计图，x轴0点在中间，左右都是正数的倒立柱形图，嗯？？？，我知道echarts图表如果数据为负数的话，x轴会出现如下形式，但是做对比的话，不可能x轴左侧显示为负数，这明显不符合要求，但是如果显示为正数的话，x轴0点就会到最左侧，失去了这种图表对比的意义
企业微信截图_15771775132641.png
- 那有什么办法实现呢？网上查了一下，有几篇文章写了有解决办法，但是看着好复杂啊，不想看他们写的逻辑，所以自己找例子去改造，这里有很多的例子gallery，可以去看看
我们首先来分析一下
1，柱状图显示为水平且左右分开x轴0点在中间
2，数据展示，图表内容肯定是要以正数的形式呈现
3，x轴左右两侧肯定都要显示为正数，0点在中间
解决方案
1，柱状图显示为水平，在设置xAxis，yAxis时，并且series中一个数值全为正，一个全为负
xAxis : [
{
type : 'value', //这里x轴类型设置为value
}
],
yAxis : [
{
type : 'category', //这里y轴类型设置为category
axisTick : {show: false},
data : ['分拣','清洗','抛光','研磨','脱膜','切割','压膜','压膜分配','光固化后处理','光固化']
}
],
series : [
{
barWidth:10,
type:'bar',
stack: '总量', //注意这里也要添加，要不然对不齐
label: {
normal: {
show: true
}
},
data:[400, 241,360, 320, 302, 341, 374, 390, 450, 420],
}，
{
barWidth:10,
type:'bar',
stack: '总量', //注意这里也要添加，要不然对不齐
label: {
normal: {
show: true
}
},
data:[-120, -180,-120, -120, -132, -101, -134, -190, -230, -210],
}
]
2，这个时候图表中的内容显示为负数,我们需要对显示数据做进一步处理，让图表中的数据显示为正数，使用formatter返回绝对值,这样在显示label时显示为正数
series:[
label: { //图表显示数值做处理
normal: {
show: true,
data:[-120, -180,-120, -120, -132, -101, -134, -190, -230, -210],
formatter: function(params){return Math.abs(params.value)} //返回绝对值
}
},
]
3，最重要的一步就是让我们的x轴坐标值也显示为正值，其实原理和我们让数值显示为正值是一样的，使用formatter返回绝对值,让x轴的axisLabel显示为正数
xAxis :[
formatter:function(params){
if(params<0){
return -params
}else{
return params
}
}
]
好了这就是最终呈现效果
企业微信截图_15771771993170.png
