How to use the @antv/g2plot.Line function in @antv/g2plot

type: 'download',
    value: 445,
  },
  {
    date: '2018/8/15',
    type: 'register',
    value: 4319,
  },
  {
    date: '2018/8/15',
    type: 'bill',
    value: 176,
  },
];

const linePlot = new Line(document.getElementById('container'), {
  title: {
    visible: true,
    text: '多折线图',
  },
  description: {
    visible: true,
    text: '将数据按照某一字段进行分组，用于比对不同类型数据的趋势。',
  },
  padding: 'auto',
  forceFit: true,
  data,
  xField: 'date',
  yField: 'value',
  yAxis: {
    label: {
      // 数值格式化为千分位

.then((data) => {
    const linePlot = new Line(document.getElementById('container'), {
      title: {
        visible: true,
        text: '为折线添加缩略轴交互',
      },
      description: {
        visible: true,
        text: '缩略轴 (slider) 交互适用于折线数据较多，用户希望关注数据集中某个特殊区间的场景。',
      },
      forceFit: true,
      padding: 'auto',
      data,
      xField: '城市',
      xAxis: {
        visible: true,
        autoHideLabel: true,
      },

.then((data) => {
    const linePlot = new Line(document.getElementById('container'), {
      title: {
        visible: true,
        text: '配置坐标轴最大值和最小值',
      },
      description: {
        visible: true,
      },
      forceFit: true,
      data,
      padding: 'auto',
      xField: 'year',
      yField: 'value',
      seriesField: 'country',
      xAxis: {
        visible: true,
        type: 'dateTime',

var source = [];   

      data.app.forEach((item) => { 

        source.push({
          key: "Thread",
          time: item.timeField,
          value: item.threadCount,
        });
 

      });  

      if (this.service_thread_chart == null) {
        this.service_thread_chart = new Line(
          document.getElementById("service-thread"),
          {
            title: {
              visible: true,
              text: "Thread",
            },

            forceFit: true,
            data: source,
            xField: "time",
            yField: "value",
            seriesField: "key",
            xAxis: {
              type: "dateTime",
              label: {
                visible: true,

mounted() {
    this.antv = new Line(this.attrs.canvasId, {
      data: this.attrs.data,
      ...this.attrs.config
    });
    this.antv.render();
  },
  updated() {

.then((data) => {
    const linePlot = new Line(document.getElementById('container'), {
      title: {
        visible: true,
        text: '单折线图的基础用法',
      },
      description: {
        visible: true,
        text: '最基础简单的折线图使用方式，显示一个指标的趋势',
      },
      forceFit: true,
      data,
      padding: 'auto',
      xField: 'Date',
      yField: 'scales',
      xAxis: {
        type: 'dateTime',
        tickCount: 5,

source.push({
          key: "GcGen1",
          time: item.timeField,
          value: item.gcGen1,
        });

        source.push({
          key: "GcGen2",
          time: item.timeField,
          value: item.gcGen2,
        }); 

      });  

      if (this.service_gc_chart == null) {
        this.service_gc_chart = new Line(
          document.getElementById("service-gc"),
          {
            title: {
              visible: true,
              text: "GC",
            },

            forceFit: true,
            data: source,
            xField: "time",
            yField: "value",
            seriesField: "key",
            xAxis: {
              type: "dateTime",
              label: {
                visible: true,

.then((data) => {
    const linePlot = new Line(document.getElementById('container'), {
      title: {
        visible: true,
        text: '配置坐标轴样式',
      },
      description: {
        visible: true,
      },
      forceFit: true,
      data,
      padding: 'auto',
      xField: 'year',
      yField: 'value',
      seriesField: 'country',
      xAxis: {
        visible: true,
        type: 'time',

load_service_call_line(response) {
      
      var source = [];

      response.body.data.trend.forEach((item) => {
        source.push({
          service: item.keyField,
          time: item.timeField,
          value: item.valueField,
        });
      });

      if (this.service_call_line_chart == null) {
        this.service_call_line_chart = new Line(
          document.getElementById("service-call-line"),
          {
            title: {
              visible: true,
              text: this.$store.state.lang.ServiceLoad,
            },

            forceFit: true,
            data: source,
            xField: "time",
            yField: "value",
            seriesField: "service",
            xAxis: {
              type: "dateTime",
              label: {
                visible: true,

source.push({
          key: "HeapMemory",
          time: item.timeField,
          value: item.heapMemory,
        });

        source.push({
          key: "ProcessMemory",
          time: item.timeField,
          value: item.processMemory,
        }); 

      });  

      if (this.service_memory_chart == null) {
        this.service_memory_chart = new Line(
          document.getElementById("service-memory"),
          {
            title: {
              visible: true,
              text: "Memory",
            },

            forceFit: true,
            data: source,
            xField: "time",
            yField: "value",
            seriesField: "key",
            xAxis: {
              type: "dateTime",
              label: {
                visible: true,