echarts折线图单位为Bit/s的数据展示

需求：单位为Bit/s的数据需要换算y轴、legend和tooltip的单位；
显示数据时需要换算单位是因为数据以比特每秒（Bit/s）的形式返回，但是在实际展示中，可能更方便和易读的是使用其他单位，例如Gb/s、Mb/s、Kb/s等等

换算Y轴的单位：需要根据负 Y 轴关键字处理y轴刻度值，并将数据放在-y轴

实现思路：判断legend中是否含有negative_y_keyword关键字，含有的放到负轴，需要转成负数（后端返回的都是正数）；换算y轴的单位

   data.value = props.series.metrics?.map((item: any, index: any) => {
        /* 判断legend中是否含有negative_y_keyword关键字，含有的放到正轴 */
        const isNegative = item.legend.includes(props.series.negative_y_keyword);
        return {
          name: item.legend,
          type: 'line',
          symbol: 'none',
          data: item.values.map((value: any) => {
            let yValue = parseInt(value[1], 10);
            if (isNegative === true) {
              yValue = -yValue;
            }
            return [value[0], yValue];
          }),
          color: color[index % 10],
          lineStyle: {
            width: 1, // 设置曲线的粗细，单位为像素
          },
          areaStyle: { opacity: 0.1 }, // 设置曲线阴影的透明度
        };
      });
  /* Bit/s的Y坐标轴数据单位转换 */
  const yAxisTransUnit = (total: number) => {
    if (total > 1000000000 || total < -1000000000) {
      return `${(total / 1000000000).toFixed(1)} Gb/s`;
    }
    if (total === 1000000000) {
      return `1 Gb/s`;
    }
    if (total === -1000000000) {
      return `-1 Gb/s`;
    }
    if (total < 1000000000 && total >= 1000000) {
      return `${(total / 1000000).toFixed(1)} Mb/s`;
    }
    if (total > -1000000000 && total <= -1000000) {
      return `${(total / 1000000).toFixed()} Mb/s`;
    }
    if (total === -1000000) {
      return `-1 Mb/s`;
    }
    if (total === 1000000) {
      return `1 Mb/s`;
    }
    return `${(total / 1000).toFixed(1)} Kb/s`;
  };

tooltip单位需要转换，都保持+值

  /* tooltip单位需要转换，都保持+值 */
  const transSpeedUnit = (total: number) => {
    const absTotal = Math.abs(total); // 获取绝对值
    if (absTotal > 1000000000) {
      return `${(absTotal / 1000000000).toFixed(2)} Gb/s`;
    }
    if (absTotal <= 1000000000 && absTotal >= 1000000) {
      return `${(absTotal / 1000000).toFixed(2)} Mb/s`;
    }
    return `${(absTotal / 1000).toFixed(2)} Kb/s`;
  };

legend需要计算avg,max,last值，并换算单位

/* 单位为Bit/s时对图例进行单位转换 */
        const mean =
          props.series.unit === 'Bit/s'
            ? transSpeedUnit(calculateMean(values))
            : calculateMean(values).toFixed(2) + props.series.unit;
        const max =
          props.series.unit === 'Bit/s'
            ? transSpeedUnit(Math.max(...values))
            : Math.max(...values) + props.series.unit;
        const last =
          props.series.unit === 'Bit/s'
            ? transSpeedUnit(values[values.length - 1])
            : values[values.length - 1] + props.series.unit;

对图例的数值排序

1.先统一单位再排序，再换算单位(太麻烦了)

  /* 对图例数据排序 */
  const handleChange = (tableData: any, extra: any) => {
    if (extra.type === 'sorter' && extra.sorter) {
      const { direction, field } = extra.sorter;
      if (props.series.unit === 'Bit/s') {
        // 统一成bit/s
        legendList.value.forEach((item: any) => {
          item.mean = convertToBitsPerSecond(item.mean);
          item.max = convertToBitsPerSecond(item.max);
          item.last = convertToBitsPerSecond(item.last);
        });
        legendList.value.sort((a: any, b: any) => {
          const valueA = a[field];
          const valueB = b[field];
          if (direction === 'ascend') {
            return valueA - valueB;
          }
          if (direction === 'descend') {
            return valueB - valueA;
          }
          return 0;
        });
        // 格式化单位
        legendList.value.forEach((item: any) => {
          item.mean = transSpeedUnit(item.mean);
          item.max = transSpeedUnit(item.max);
          item.last = transSpeedUnit(item.last);
        });
      } else {
        legendList.value.sort((a, b) => {
          const valueA = parseFloat(a[field].replace('%', ''));
          const valueB = parseFloat(b[field].replace('%', ''));
          if (direction === 'ascend') {
            return valueA - valueB;
          }
          if (direction === 'descend') {
            return valueB - valueA;
          }
          return 0;
        });
      }
    }
  };

2.在视图处换算单位

<template #mean="{ record }">
        <span
          v-if="props.series.unit !== 'Bit/s'"
          :class="{ 'highlighted-row': !record.checked && data.length !== legendList?.length }"
          >{{ record.mean }}{{ props.series.unit }}</span
        >
        <span
          v-else
          :class="{ 'highlighted-row': !record.checked && data.length !== legendList?.length }"
          >{{ transUnit(record.mean, props.series.unit) }}</span
        >
      </template>