The echarts coordinate axis scale value is expressed in scientific notation

Recently, I used echarts to make charts. When there are too many digits, the numbers will be incompletely displayed and blocked on the small screen mobile phone.

echarts: "5.4.0",

vue: "3.2.45",

use scientific notation

//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;
  }
}

<template>
  <div class="sku-details-echarts">
    <div ref="historicalPrice_chart" style="height:350px;width:100%;"></div>
  </div>
</template>

<script setup name="SkuDetailsEcharts" lang="ts">
import { ComponentInternalInstance } from 'vue';
import * as echarts from 'echarts';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const historicalPrice_chart = ref();

/********************** 方法调用 **********************/
let resizeObserver: ResizeObserver | null = null,
  canResize = true,
  historicalPrice_echarts: echarts.ECharts | null = null

const initChart = () => {
  nextTick(() => {
    // 历史价格
    historicalPrice_echarts = echarts.init(historicalPrice_chart.value);
    historicalPrice_echarts.setOption({
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '1%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: (value: number) => echartsYaxisLabelFormatter(value) //调用科学计数法方法
        },
      },
      series: [
        {
          data: [
            '0',
            '0',
            '41040142.00',
            '363014742873.60',
            '175749696.00',
            '18144044046547.20',
            '0',
            '48448.20',
            '10632.50',
            '5024.00',
            '8414.40'
          ],
          type: 'line',
          smooth: true
        }
      ]
    })

    const targetElement = document.getElementsByClassName('hasTagsView')[0];
    resizeObserver = new ResizeObserver(entries => {
      if (!canResize) {
        return
      }
      canResize = false
      setTimeout(() => {
        canResize = true
        console.log('监听到宽高的变化++++++++++++');
        historicalPrice_echarts?.resize()
      }, 500)

      /*     console.log(entries[0].contentRect.width)
          console.log(entries[0].contentRect.height) */
    })
    resizeObserver.observe(targetElement)
  })
}

onUnmounted(() => {
  // 停止监听给定的元素
  // resizeObserver?.unobserve(targetElement);
  // 停止监听所有元素
  resizeObserver?.disconnect();
  console.log('卸载了+++++++++++++++++++++');
})

onMounted(() => {
  nextTick(() => {
    // 销毁echarts实例
    historicalPrice_echarts?.dispose();
    // initChart()
    initChart()
  })
});
</script>

<style scoped lang="scss"></style>