echarts x轴左右都是正数 将负数转化为正数

本文介绍如何在ECharts中处理带有负数值的柱状图,并通过使用Math.abs()函数来移除负号显示,同时保持负数柱子位于图表左侧的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原图
在这里插入图片描述

代码

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter:function(params)
        {
           var relVal = params[0].name;
           for (var i = 0, l = params.length; i < l; i++) {
                if(params[i].value!=''){
                    if(params[i].value==0){
                        return relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
                    }else{
                        return relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value+"K";
                    }
                }
            }
        }
    },
    grid: {
        top:'10%',
        left: '3%',
        right: '10%',
        bottom: '20%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'value'
        }
    ],
    yAxis : [
        {
            type : 'category',
            axisTick : {show: false},
            data : ["UAT","Pre-Production","Prod","PRD","Test","Production"],
            axisLabel: {
                color: "#000",
                interval: 0,
                formatter: function(value) {
                    if (value.length > 8) {
                      return value.substring(0, 8) + "...";
                    } else {
                      return value;
                    }
                }
            }
        }
    ],
    series : [
        {
            name:'账单金额',
            type:'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: "#4682B4",
                    lineStyle: {
                        color: "#4682B4"
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'inside',
                    formatter: function (param) {
                       	return param.value==0 ? param.value:param.value+'k';
                    }
                }
            },
            data:[{value: "-12"},{value: "-11"},{value: "-2"},{value: ""},{value: ""},{value: ""}]
        },
        {
            name:'账单金额',
            type:'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: "#FF7F50",
                    lineStyle: {
                        color: "#FF7F50"
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'inside',
                    formatter: function (param) {
                        return param.value==0 ? param.value:param.value+'k';
                    }
                }
            },
            data:[{value: ""},{value: ""},{value: ""},{value: "1"},{value: "2"},{value: "9"}]
        }
    ]
};

需求:将负号’-'去掉 负数的柱子仍然在左边
解决方案:关键代码 Math.abs() 去除负号即可

return param.value==0 ? param.value:param.value+'k';

改为如下即可

return Math.abs(param.value)==0 ? Math.abs(param.value):Math.abs(param.value)+'k';

效果
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值