spectrum-plot

line 数量 * 每个 line 上点数量

正常数据

最大数量：6千万

鼠标操作无影响

最大数量：2千万

example

<template>
  <div class="spectrum">
    <SpectrumPlot :options="spectrumOpts" :data="spectrumData" height="360" :t="t" />
  </div>
</template>
<script setup lang="ts">
  import { onMounted, shallowRef } from 'vue';
  import { SpectrumPlot, type SpectrumPlotData, type SpectrumPlotOptions } from 'spectrum-plot';
  import { useI18n } from 'vue-i18n';

  const t = useI18n();

  const spectrumData = shallowRef<SpectrumPlotData>([]);
  const spectrumOpts = shallowRef<SpectrumPlotOptions>({
    type: 'line',
    // showPoint: "solid",
    // fullTooltip: true,
    legend: { show: false },
    // 配置 x 轴参数，配置双 y 轴参数（根据 space，size，rotate 来调整刻度值和 label 之间的距离）
    axes: [
      {
        side: 2,
        scale: 'x',
        label: '时间',
        space: 70,
        size: 42,
        rotate: 0 /* , grid: { show: false } */,
      },
      {
        side: 3,
        scale: 'y',
        label: '能量值(J)',
        space: 20,
        size: 42 /* , grid: { show: false } */,
      },
      // { side: 1, scale: 'y1', label: '吸光度(%)', space: 20, size: 42 },
    ],
    // 配置 x 轴的刻度是否是时间，同时使用双 Y 轴
    scales: {
      x: { time: true },
      y: { time: false },
      // y1: { time: false },
    },
  });

  onMounted(() => {
    setTimeout(() => {
      // 数据生成
      const data = [
        [Date.now(), Date.now() + 1000 * 60, Date.now() + 1000 * 120],
        [1, 3, 8],
        [3, 4, 5],
        [1, 2, 3],
      ];
      // const data = prepData(20000, 1000, 10);
      // 配置 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,
        series,
      };
      spectrumData.value = data;
    }, 500);
  });
</script>
<style lang="scss">
  html,
  body,
  .spectrum {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>