echarts图表y坐标轴单位

本文介绍了如何通过导出一个包含坐标轴转换函数的文件,解决不同图表单位不一致的问题。重点讲解了三个单位转换方法:k、无单位和MiB/GiB,并展示了如何在ECharts中导入并应用于y轴标签。

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

1、坐标轴方法可以集合在一个文件内,用export default导出,便于解决多个图表的坐标轴单位不同

export default {

  //单位k

  tranNumber(num) {

    var numStr = num.toString();

    // 三位数以内直接返回

    if (numStr.length < 4) {

      return numStr;

    }

    //大于3位数加k   

    else if (numStr.length > 3) {

      var decimal = numStr.substring(numStr.length - 4, numStr.length - 4);

      return parseFloat((num / 1000) + '.' + decimal) + 'k';

    }

  },

  //无单位 

  Kone_tranNumber(num) {

    var numStr = num.toString();

    // 三位数以内直接返回

    if (numStr.length < 4) {

      return numStr;

    }

    //大于3位数

    else if (numStr.length > 3) {

      var decimal = numStr.substring(numStr.length - 4, numStr.length - 4);

      let number = parseFloat(parseInt(num / 1000) + '.' + decimal);

    }

  },

  //单位 MiB GiB

  Two_tranNumber(num) {

    var numStr = num.toString();

    // 三位数以内+M

    if (numStr.length < 4) {

      return numStr + 'M';

    }

    //大于3位数加G

    else if (numStr.length > 4) {

      var decimal = numStr.substring(numStr.length - 4, numStr.length - 4);

      let number = parseFloat((num / 1000000) + '.' + decimal)

      return number < 1000 ? number + 'MiB' : String(Number(number) / 1000) + 'G';

    }

  },

}

2、在对应的echarts图表中使用 

1)、首先引入方法文件, import yAxisOne from "../../../utils/yAxis"; 此处文件夹路径为我自己的路径

在echart中有个yaxis属性,可以如下使用坐标轴方法

          yAxis: {

            type: "value",

            axisLabel: {

              formatter: yAxisOne.tranNumber,

              color: "#1e1e1e",

            },

          },

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值