How to use @antv/g2plot - 10 common examples

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: {
      // 数值格式化为千分位

import { Bar } from '@antv/g2plot';

const data = [
  { 地区: '华东', 销售额: 4684506.442 },
  { 地区: '中南', 销售额: 4137415.0929999948 },
  { 地区: '东北', 销售额: 2681567.469000001 },
  { 地区: '华北', 销售额: 2447301.017000004 },
  { 地区: '西南', 销售额: 1303124.508000002 },
  { 地区: '西北', 销售额: 815039.5959999998 },
];

const barPlot = new Bar(document.getElementById('container'), {
  title: {
    visible: true,
    text: '基础条形图',
  },
  forceFit: true,
  data,
  xField: '销售额',
  yField: '地区',
  xAxis: {
    formatter: (v) => Math.round(v / 10000) + '万',
  },
  label: {
    visible: true,
    position: 'middle', // options: left / middle / right
  },
});

.then((data) => {
    const plot = new StackArea(document.getElementById('container'), {
      title: {
        visible: true,
        text: 'The causes of CO2 emissions',
      },
      padding: 'auto',
      data,
      xField: 'year',
      yField: 'value',
      seriesField: 'category',
      xAxis: {
        type: 'time',
      },
      yAxis: {
        label: {
          // 数值格式化为千分位
          formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),

import { Gauge } from '@antv/g2plot';

const gaugePlot = new Gauge(document.getElementById('container'), {
  title: {
    visible: true,
    text: '仪表盘样式',
  },
  value: 64,
  min: 0,
  max: 100,
  range: [20, 40, 60, 80],
  gaugeStyle: {
    colors: ['#1890FF', '#2FC25B', '#FACC14', '#223273', '#8543E0', '#13C2C2', '#3436C7', '#F04864'],
    // stripWidth: 30,
    // stripBackColor: '#ddd',
    // tickInterval: 20,
    // tickLabelPos: 'inner',
    // tickLabelSize: 16,
    // tickLabelColor: '#aaa',

.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,