dataset/web/Vchart/line/chart_0023_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/stream-graph-data.json');
const data = await response.json();

const spec = {
  type: 'area',
  data: {
    id: 'data',
    values: data
  },
  color: ['#F7FCFD', '#E0ECF4', '#BFD3E6', '#9EBCDA', '#8C96C5', '#8C6BB1', '#88419D', '#810F7C', '#4D004A'],
  title: {
    visible: true,
    text: 'EVOLUTION OF BABY NAMES IN THE US'
  },

  xField: 'year',
  yField: 'n',
  seriesField: 'name',
  stackOffsetSilhouette: true,
  point: { visible: false },
  area: {
    style: {
      fillOpacity: 0.4
    },
    state: {
      hover: {
        style: {
          fillOpacity: 1
        }
      }
    }
  },
  legends: [{ range: [], visible: true, position: 'middle', orient: 'bottom' }],

  axes: [
    {
      orient: 'left',
      visible: false
    },
    {
      orient: 'bottom',
      label: { visible: true }
    }
  ]
};

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>