Algunos usos básicos de AntvG2Plot

1. Gráfico de líneas

Código del sitio web oficial

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

fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
  .then((res) => res.json())
  .then((data) => {
    const line = new Line('container', {
      data,
      padding: 'auto',
      xField: 'Date',
      yField: 'scales',
      xAxis: {
        // type: 'timeCat',
        tickCount: 5,
      },
    });

    line.render();
  });

representaciones

1.1 Crear una instancia de gráfico

línea const = nueva línea (contenedor, opciones);

La instancia de gráfico creada tiene dos propiedades públicas:

contenedor HTMLElement: contenedor DOM para la representación de gráficos.

opciones PlotOptions: todas las opciones de configuración completas actuales del gráfico, que son el resultado de fusionar la entrada del usuario y los elementos de configuración predeterminados integrados del gráfico.

1.2 Elementos de configuración

1.2.1 datos (datos entrantes)

1.2.2 xField (campo del eje x, los datos del eje x son los datos en datos)

1.2.3 yField (campo del eje y, los datos del eje y son los datos en datos)

1.2.4 relleno (margen interior del gráfico)

1.2.5 xAxis (configuración del eje x)

2. Gráfico circular

Código del sitio web oficial

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

const data = [
  { type: '分类一', value: 27 },
  { type: '分类二', value: 25 },
  { type: '分类三', value: 18 },
  { type: '分类四', value: 15 },
  { type: '分类五', value: 10 },
  { type: '其他', value: 5 },
];

const piePlot = new Pie('container', {
  appendPadding: 10,
  data,
  angleField: 'value',
  colorField: 'type',
  radius: 0.9,
  label: {
    type: 'inner',
    offset: '-30%',
    content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
    style: {
      fontSize: 14,
      textAlign: 'center',
    },
  },
  interactions: [{ type: 'element-active' }],
});

piePlot.render();

representaciones

2.1 Crear una instancia de gráfico

línea const = nueva línea (contenedor, opciones);

La instancia de gráfico creada tiene dos propiedades públicas:

contenedor HTMLElement: contenedor DOM para la representación de gráficos.

2.2 Elementos de configuración

2.2.1 datos (datos entrantes)

2.2.2 appendPadding (márgenes reservados en los cuatro lados)

2.2.3 angleField (campo de mapeo de ángulos)

2.2.4 colorField (campo de mapeo de color)

2.2.5 radio (radio del gráfico circular)

2.2.6 etiqueta (etiqueta de gráfico circular)

2.2.7 interacciones (interacción de gráfico)

3. Histograma

Código del sitio web oficial

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

const data = [
  {
    type: '家具家电',
    sales: 38,
  },
  {
    type: '粮油副食',
    sales: 52,
  },
  {
    type: '生鲜水果',
    sales: 61,
  },
  {
    type: '美容洗护',
    sales: 145,
  },
  {
    type: '母婴用品',
    sales: 48,
  },
  {
    type: '进口食品',
    sales: 38,
  },
  {
    type: '食品饮料',
    sales: 38,
  },
  {
    type: '家庭清洁',
    sales: 38,
  },
];

const columnPlot = new Column(document.getElementById('container'), {
  title: {
    visible: true,
    text: '基础柱状图',
  },
  forceFit: true,
  data,
  padding: 'auto',
  data,
  xField: 'type',
  yField: 'sales',
  meta: {
    type: {
      alias: '类别',
    },
    sales: {
      alias: '销售额(万)',
    },
  },
});

columnPlot.render();

representaciones

3.1 Crear una instancia de gráfico

línea const = nueva línea (contenedor, opciones);

La instancia de gráfico creada tiene dos propiedades públicas:

contenedor HTMLElement: contenedor DOM para la representación de gráficos.

3.2 Elementos de configuración

3.2.1 título (ya sea para mostrar el título)

3.2.2 datos (datos entrantes)

3.2.3 xField (campo del eje x, los datos del eje x son los datos en datos)

3.2.4 yField (campo del eje y, los datos del eje y son los datos en datos)

3.2.5 meta (metainformación de datos del gráfico de configuración global)

Algunos usos básicos de AntvG2Plot

Supongo que te gusta