echarts坐标轴刻度值使用科学计数法表示

最近使用echarts做图表,数字位数过多时,在小屏手机会出现数字显示不全,被遮挡的问题。

echarts: "5.4.0",

vue: "3.2.45",

使用科学计数法

//y轴使用科学计数法表示
const echartsYaxisLabelFormatter = (value: any) => {
  if (Math.abs(value) > 100000) {
    if (value == 0) {
      return "0";
    } else if ((value + '').indexOf('e') > 0) {
      return (value + '').replace(/e/, "E");
    } else {
      let res = value.toString(),
        numN1 = 0,
        numN2 = 0,
        num1 = 0,
        num2 = 0,
        t1 = 1

      for (let k = 0; k < res.length; k++) {
        if (res[k] == ".")
          t1 = 0;
        if (t1)
          num1++;
        else
          num2++;
      }

      // 均转换为科学计数法表示
      if (Math.abs(value) < 1) {
        // 小数点后一位开始计算
        for (let i = 2; i < res.length; i++) {
          if (res[i] == "0") {
            numN2++; //记录10的负指数值(默认值从1开始)
          } else if (res[i] == ".")
            continue;
          else
            break;
        }

        let v: number | string = parseFloat(value);
        v = v * Math.pow(10, numN2);
        v = v.toFixed(1); //四舍五入 仅保留一位小数位数
        return `${v.toString()}e-${numN2}`;
      } else if (num1 > 1) {
        numN1 = num1 - 1;
        let v: number | string = parseFloat(value);
        v = v / Math.pow(10, numN1);
        if (num2 > 1) {
          v = v.toFixed(1);
        }
        return `${v.toString()}e${numN1}`;
      }

    }
  } else {
    return value;
  }
}





你可能感兴趣的:(前端,vue3,echarts,前端,javascript,vue.js)