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

原图
在这里插入图片描述

代码

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';

效果
在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要设置有负数显示负数坐标正数则不显示负数坐标,可以使用 ECharts 中的 axis.axisLine.onZero 参数和 axis.min 属性。 axis.axisLine.onZero 参数用于控制是否显示坐标在数据上的 0 刻度线。当该参数为 true 时,会在数据显示 0 刻度线;当该参数为 false 时,不会显示 0 刻度线。 axis.min 属性用于设置坐标的最小值。当该值小于 0 时,会显示负数;当该值大于等于 0 时,不会显示负数。 因此,如果要实现有负数显示负数坐标正数则不显示负数坐标,可以按照以下步骤进行设置: 1. 在 x 或 y 的设置中,将 axisLine.onZero 参数设置为 false,表示不在数据显示 0 刻度线。 2. 根据数据中的最小值来设置 axis.min 属性的值。如果数据中存在负数,则将 axis.min 属性设置为 null,表示自动计算最小值;如果数据中不存在负数,则将 axis.min 属性设置为 0,表示不显示负数。 下面是一个示例代码: ``` option = { xAxis: { type: 'value', axisLine: { onZero: false // 不在数据显示 0 刻度线 }, min: null // 自动计算最小值 }, yAxis: { type: 'value', axisLine: { onZero: false // 不在数据显示 0 刻度线 }, min: null // 自动计算最小值 }, series: [{ data: [-1, 2, 3, 4, 5], type: 'line' }] }; ``` 在上面的示例中,如果数据中存在负数,例如 [-1, 2, 3, 4, 5],则会显示负数;如果数据中不存在负数,例如 [1, 2, 3, 4, 5],则会隐藏负数
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值