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

最新推荐文章于 2024-06-05 10:41:46 发布

鸭鸭:)

最新推荐文章于 2024-06-05 10:41:46 发布

阅读量906

点赞数 9

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Vevean2545116309/article/details/136216741

这篇文章讲述了如何在数据可视化中将以比特每秒（Bit/s）返回的数据显示为更易读的单位（如GB/s、Mb/s、Kb/s），包括Y轴单位的转换、图例和tooltip中的单位调整，以及对图例数据的排序和格式化。

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

需求：单位为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 `