菜鸟成长日记Day2

highchart柱形图因数据差异太大，导致小数据柱子无法展示。 解决方案：

    ...commonChartCofig,
    chart: {
      height: '300px',
      type: 'column',
    },
    tooltip: {
      formatter: function () {
        return (
          '<strong>' +
          this.series.name +
          ': </strong>' +
          '<br/>' +
          '<strong>数量:</strong > ' +
          Number(this.y) +
          '<br/>' +
          '<strong>时间:</strong > ' +
          this.x
        );
      },
    },
    yAxis: {
      title: {
        text: '数量',
      },
    },
    plotOptions: {
      series: {
        cursor: 'pointer',
        borderWidth: 0,
        dataLabels: {
          enabled: true,//备注：此处将柱子头上的label显示出来
        },
      },
      column: {
        minPointLength: 1,
        //备注:列的最小高度或条的最小宽度。默认情况下，不显示0值。要可视化0或接近于零）的点，
        可以将最小点长度设置为像素值，例如1.
        events: {
          click: (e) => {
            const duration = e?.point?.category?.replace('ms', '')?.replace('<', '');
            const handledFilter = `duration < ${duration}`;
            const paramsInfo = { ...selectInfo, filters: handledFilter };
            const params = formatURLSearchParams(paramsInfo)?.toString();
            const href = `${window.location.origin}/a/apm/app/globalSerach?${params}`;
            window.open(href, '_blank');
          },
        },
      },
    },
    xAxis: {
      categories: [
        '<10ms',
        '<20ms',
        '<30ms',
        '<50ms',
        '<100ms',
        '<200ms',
        '<300ms',
        '<500ms',
        '<1s',
        '<2s',
        '<3s',
        '<5s',
        '<10s',
        '<20s',
        '<30s',
        '<1m',
        '>1m',
      ],
    },
    series: chartData?.invokeDelayChart,
  };