echarts正负条形图设置y轴在0刻度线上

 效果图如上！！

首先设置x轴都为正数，并且设置0轴固定在中间位置

在xAxis属性中

          xAxis: [
            {
              type: 'value',
              axisLabel: {
                  formatter: (value) => {
                    console.log(value);
                  // 负数取反 显示的就是正数了
                    if (value < 0) return -value
                    else return value
                  }
                },
              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);
                }
            }
          ],

如果害需要鼠标移入出现提示框，就设置

        tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: (params) => {
              console.log(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
            }
          },

x轴的坐标就设置完毕了，接下来设置y轴的数据

y轴可以通过偏移量去设置

          yAxis: [
            {
              type: 'category',
              axisTick: {
                show: false
              },
              //去掉y轴的线 
              axisLine: {
              show: false,
            },
            nameLocation: "end",
            nameTextStyle: {
              verticalAlign: "middle",
            },
            //y轴的偏移
            offset: -200,
            //层级
            zlevel: 1000,
            //样式的设置
            axisLabel: {
              fontSize: 16,
              fontWeight: "bold",
              color: "#080808",
              lineHeight: 18,
              width:67,
              height:21,
              borderRadius:[100,100,100,100],
              backgroundColor:'rgba(56,56,116,0.5)',
              verticalAlign:'middle',
              align:"center",
            },
              data: data
            }
          ],

不过这种没有响应式，我们echarts图大小变化后，就会出现偏差

还有一种是通过series中有一个label，可以通过设置这个字体位置，字体样式达到我们需要的效果，还会随着echarts图大小变化

series:[
        {
      name: '用能人数',
      type: 'bar',
      stack: 'Total',
      barWidth: '40%',
      label: {
        show: true,
        formatter: '{b}',
         offset:[25,0],
         color:"#FFFFFF",
         backgroundColor:'rgba(56,56,116,0.5)',
         width:55,
         height:15,
         lineHeight :15,
         borderRadius:[100,100,100,100],
         position:[-30,0],
         align:"center"
      },
       itemStyle: {
         color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#FFEF84" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#B23EFF " // 100% 处的颜色
              }
            ]
          },
           borderRadius: [15, 15, 15, 15]
       },
        showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      emphasis: {
        focus: 'series'
      },
      data: energy_num
    }
]

在label中通过设置offset还有position，去调整位置，达到效果！！！