echarts柱状图实现左右横向对比

左手吻左脸。

已于 2024-05-09 10:02:53 修改

阅读量1.7k

点赞数 15

分类专栏： Echarts问题解决文章标签： echarts javascript 前端

于 2024-05-06 15:39:52 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47194802/article/details/138496174

版权

实现效果如上图

其实是两组数据，其中一组数据改为负数，然后在展示的时候，在将负数取反

第一处修改坐标轴

   xAxis: [
      {
        type: 'value',
        axisLabel: {
          formatter: function (value) {
            if (value < 0) {
              return -value;
            }else{
              return value;
            }
          }


        }
      }
    ],

第二处修改数据，转负为正

 {
        name: '左',
        type: 'bar',
        color: '#21B8FF',
        stack: '总量',
        label: {
          show: true,
          position: 'left',
          formatter: function (value) {
            if (value.data < 0) {
              return -value.data;
            }
          },


        },
        emphasis: {