Echarts正负条形图将x轴都设置成正数

最近在做项目的时候需要用到 Echarts 的正负条形图，但是条形图的左半部分的数值是负数的，但是我们需要他也是正数的，话不多说，先上效果图：

所以需要做如下几步修改：

1. 首先需要修改x轴上面显示为负数的刻度标签，找到xAxis[i].axisLabel，重写他的formatter，代码如下所示：

   xAxis: [
     {
   	type: 'value',
       axisLabel: {
      	  formatter: (value) => {
   	    // 负数取反 显示的就是正数了
      	    if (value < 0) return -value
           else return value
      	  }
       }
     }
   ]
   

2. 其次修改柱状图上面显示为负数的文本标签，找到series[i].label，重写他的formatter，代码如下所示：

   series: [
     {
       name: '流入',
       type: 'bar',
       stack: '总量',
       label: {
         show: true,
         // formatter 的另一种简便写法
         formatter: '{c} MB/S'
       },
       itemStyle: {
         color: '#47a1ff'
       },
       data: [388.28, 333.69, 408.56, 391.61, 480.39]
     },
     {
       name: '流出',
       type: 'bar',
       stack: '总量',
       label: {
         show: true,
         formatter: (value) => {
           // 值都是负数的 所以需要取反一下
           return -value.data + 'MB/S'
      	}
       },
       itemStyle: {
         color: '#fbd54c'
       },
       data: [-409.17, -473.6, -462.96, -501.67, -452.13]
     }
   ]
   

3. 如果有提示框的话，提示框中为负数的数据也要坐相应的修改，代码如下所示：

   tooltip: {
     trigger: 'axis',
     axisPointer: {
     	type: 'shadow' // 坐标指示器类型
     },
     formatter: (params) => {
       if (!params.length) return ''
       let s = params[0].axisValueLabel + '<br/>'
       for (const iterator of params) {
    	  // 如果是负数则反转
         let d = iterator.data < 0 ? -iterator.data : iterator.data
         s += iterator.marker + iterator.seriesName + '：' + d + ' MB/S' + '<br/>'
       }
       return s
     }
   }
   

最后附上option全部代码：

let option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: (params) => {
      if (!params.length) return ''
      let s = params[0].axisValueLabel + '<br/>'
      for (const iterator of params) {
        let d = iterator.data < 0 ? -iterator.data : iterator.data
        s += iterator.marker + iterator.seriesName + '：' + d + ' MB/S' + '<br/>'
      }
      return s
    }
  },
  legend: {
    data: ['流出', '流入']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'value',
      axisLabel: {
        formatter: (value) => {
          if (value < 0) return -value
          else return value
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['GigabitEthernet1/0/47', 'GigabitEthernet2/0/24', 'GigabitEthernet2/0/23', 'GigabitEthernet1/0/18', 'GigabitEthernet1/0/8']
    }
  ],
  series: [
    {
      name: '流入',
      type: 'bar',
      stack: '总量',
      label: {
        show: true,
        formatter: '{c} MB/S'
      },
      itemStyle: {
        color: '#47a1ff'
      },
      data: [388.28, 333.69, 408.56, 391.61, 480.39]
    },
    {
      name: '流出',
      type: 'bar',
      stack: '总量',
      label: {
        show: true,
        formatter: (value) => {
          // 值都是负数的 所以需要取反一下
          return -value.data + 'MB/S'
        }
      },
      itemStyle: {
        color: '#fbd54c'
      },
      data: [-409.17, -473.6, -462.96, -501.67, -452.13]
    }
  ]
}