dataset/web/Vchart/line/chart_0020_line.html

<div id="chart" style="width:100%;height:520px;"></div>
<script src="_deps/cdn.jsdelivr.net/npm/@visactor/vchart/build/index.min.js"></script>
<script type="module">
  // 这里粘贴你的那段 JS 代码
const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/overlap-data.json');
const data = await response.json();

const spec = {
  type: 'common',
  // seriesField: 'color',
  data: [
    {
      id: 'id0',
      values: data
    },
    {
      id: 'id1',
      values: data
    },
    {
      id: 'id2',
      values: data
    }
  ],
  series: [
    {
      type: 'line',
      id: 'no sampling',
      dataIndex: 0,
      xField: 'x',
      yField: 'y',
      point: {
        style: {
          fill: '#1664FF'
        }
      },
      line: {
        style: {
          stroke: '#1664FF'
        }
      }
    },
    {
      type: 'line',
      id: 'lttb sampling',
      dataIndex: 1,
      xField: 'x',
      yField: 'y',
      sampling: 'lttb',
      samplingFactor: 0.1,
      point: {
        style: {
          fill: '#FF8A00'
        }
      },
      line: {
        style: {
          stroke: '#FF8A00'
        }
      }
    },
    {
      type: 'line',
      id: 'average sampling',
      dataIndex: 2,
      xField: 'x',
      yField: 'y',
      sampling: 'average',
      samplingFactor: 0.1,
      point: {
        style: {
          fill: '#FFC400'
        }
      },
      line: {
        style: {
          stroke: '#FFC400'
        }
      }
    }
  ],
  axes: [
    { orient: 'left', seriesIndex: [0, 1, 2, 3, 4, 5] },
    // { orient: 'right', seriesId: ['line'], grid: { visible: false } },
    { orient: 'bottom', label: { visible: true }, type: 'band' }
  ],
  legends: {
    visible: true,
    orient: 'bottom'
  }
};

const vchart = new VChart.default(spec, { dom: "chart" });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
  // 只要记得：dom 要写成 "chart"
</script>