spectrum-plot

line 数量 * 每个 line 上点数量

正常数据

最大数量：6千万

鼠标操作无影响

最大数量：2千万

example

<template>
  <div class="spectrum">
    <SpectrumPlot
      :options="spectrumOpts"
      :data="spectrumData"
      height="360"
      :translate="{ zoomin: 'Zoom In', zoomout: 'Zoom Out', reset: 'Reset' }" />
  </div>
</template>

<script setup lang="ts">
  import { onMounted, shallowRef } from 'vue';
  import { useWebSocket } from '@@/composables';
  import { SpectrumPlot, type SpectrumPlotData, type SpectrumPlotOptions } from '@@/components';
  // import { getWebSocketUrl, getXmlData, fetchBuffer } from './api';

  defineOptions({
    name: 'App',
    inheritAttrs: false,
  });
  const { send } = useWebSocket(
    'ws://111',
    (data) => {
      console.log('WebSocket received data:', data);
    },
    { maxConnectAttempts: 10 },
  );
  send('hellow word');
  const spectrumData = shallowRef<SpectrumPlotData>([]);
  const spectrumOpts = shallowRef<SpectrumPlotOptions>({});

  function prepData(seriesPoints: number, numSeries: number = 1, seriesShift: number = 1) {
    const random = (i) => {
      return 0.5 * (i + 1);
      // return Math.random()
    };
    const x = Array(seriesPoints);
    const ys = [];
    let a = 0,
      b = 0,
      c = 0,
      spike = 0;
    const now = Date.now();

    for (let i = 0; i < seriesPoints; i++) {
      // 秒级
      x[i] = now - 1000 * 60 * 10 * i;
    }

    for (let j = 0; j < numSeries; j++) {
      const y = Array(seriesPoints);
      const shift = j * seriesShift;

      const bit = j < 3 ? 1 : 0.8;

      for (let i = 0; i < seriesPoints; i++) {
        if (i % 100 === 0) a = 2 * random(i);
        if (i % 1000 === 0) b = 2 * random(i);
        if (i % 10000 === 0) c = 2 * random(i);
        if (i % 50000 === 0) spike = 10;
        else spike = 0;

        y[i] = (shift + 2 * Math.sin(i / 100) + a + b + c + spike + random(i)) * bit;
      }

      ys.push(y);
    }
    return [x.toReversed()].concat(ys) as SpectrumPlotData;
  }
  onMounted(() => {
    setTimeout(() => {
      // 框架整理：i18n request router 等等
      // 可以选中线
      const data = prepData(20000, 1000, 10);
      // 配置 x 轴的刻度是否是时间，同时使用双 Y 轴
      const scales: SpectrumPlotOptions['scales'] = {
        x: { time: true },
        y: { time: false },
        // y1: { time: false },
      };
      // 配置 x 轴参数，配置双 y 轴参数（根据 space，size，rotate 来调整刻度值和 label 之间的距离）
      const axes: SpectrumPlotOptions['axes'] = [
        { side: 2, scale: 'x', label: '时间', space: 70, size: 42, rotate: 0 },
        { side: 3, scale: 'y', label: '能量值(J)', space: 20, size: 42 },
        // { side: 1, scale: 'y1', label: '吸光度(%)', space: 20, size: 42 },
      ];
      // 配置 x 轴系列，data[0] 为 x 轴数据，要按照从小到大顺序排序
      const series: SpectrumPlotOptions['series'] = [{ label: '时间' }];
      // ，配置双 y 轴系列，前三个为能量值，后三个为吸光度
      for (let i = 1; i < data.length; i++) {
        series.push({
          scale: 'y', // i <= 3 ? 'y' : 'y1',
          label: i <= 3 ? `能量${i}` : `吸光度${i - 3}`,
          // stroke: 'red',
        });
      }
      spectrumOpts.value = {
        ...spectrumOpts.value,
        type: 'line',
        // fullTooltip: true,
        scales,
        axes,
        series,
      };
      spectrumData.value = data;
      /* setTimeout(() => {
      debugger;
      spectrumData.value = prepData(10000, 3, 1000);
    }, 5000); */
    }, 500);
  });
</script>
<style lang="scss">
  html,
  body,
  .spectrum {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #app {
    width: 80%;
    height: 40%;
    margin-left: 5%;
    padding: 0;
  }
</style>