Explicación detallada de los parámetros del gráfico antv f2

gráfico de área

---

El gráfico de líneas es un tipo de gráfico que se usa a menudo y es relativamente fácil. No existe un concepto de tipos de gráficos específicos (histograma, gráfico de dispersión, gráfico de líneas, etc.) en G2. Los usuarios pueden dibujar un determinado tipo de gráfico por separado, como gráfico circular, también puede dibujar un gráfico mixto, como una combinación de un gráfico de líneas y un histograma, y ​​una combinación de un gráfico de líneas y un gráfico de áreas puede lograr el efecto que se muestra en la figura;

Documentación de parámetros comunes

Atributos	ilustrar	tipo	valores predeterminados
envase	Especifique el DOM dibujado por el gráfico, puede pasar la identificación de DOM o pasar directamente la instancia de dom	cadena | Elemento HTML	-
autoajustar	Si el gráfico es adaptable al ancho y alto del contenedor.Si el usuario establece la altura, prevalecerá la altura establecida por el usuario	booleano	FALSO
ancho	Ancho del gráfico	número	-
altura	altura del gráfico	número	-
relleno	relleno de gráfico	'auto'|número |número[]	'auto'

Escala métrica

Atributos	ilustrar	tipo	valores predeterminados
min	Establecer el valor mínimo del sistema de coordenadas correspondiente	cualquier	-
máximo	Establecer el valor mínimo del sistema de coordenadas correspondiente	cualquier	-
rango	El rango de dibujo del sistema de coordenadas generalmente no necesita ser modificado	[número,número]	[0, 1]
alias	El alias de visualización del campo de datos generalmente se usa para establecer el nombre chino correspondiente del campo	cadena	-
lindo	Ajusta automáticamente min, max	booleano	FALSO

información sobre herramientas rápida

Atributos	ilustrar	tipo	valores predeterminados
mostrar título	Ya sea para mostrar el título de información sobre herramientas	booleano	FALSO
compartido	verdadero significa fusionar y mostrar todos los datos correspondientes al punto actual, y falso significa mostrar solo el contenido de datos más cercano al punto actual	booleano	FALSO
Mostrar punto de mira	Ya sea para mostrar la línea auxiliar de información sobre herramientas.	booleano	FALSO

eje del sistema de coordenadas

Atributos	ilustrar	tipo	valores predeterminados
línea	El elemento de configuración del eje de coordenadas, nulo significa que no se muestra	nulo | objeto	-
línea de marca	El elemento de configuración de la línea de escala del eje de coordenadas, nulo significa que no se muestra	nulo | objeto	-
red	El elemento de configuración de la línea de cuadrícula del eje de coordenadas, nulo significa que no se muestra	nulo | objeto	-

chart.line(opciones)

Se utiliza para dibujar gráficos de líneas, gráficos de curvas, gráficos de líneas de escalera, etc.

chart.area(opciones)

Se utiliza para dibujar gráficos de áreas (gráficos de áreas), gráficos de áreas apiladas, gráficos de áreas de intervalos, etc.

geom.posición()

Configurar reglas de asignación de canales de posición

Ejemplo:

// 数据结构: [{ x: 'A', y: 10, color: 'red' }]
geom.position('x*y');

geom.color()

Configurar colores de gráfico

// 基础颜色设置
geom.color('#1890ff');
// 渐变
geom.color("l(90) 0:#0b83de 1:#0c1c2d")

geom.shape()

Configuración relacionada con los gráficos, la descripción en el documento no es muy completa, puede obtener la información correspondiente del ejemplo del gráfico

Atributos	ilustrar
liso	Para la configuración de suavizado de gráficos de líneas

<template>
  <div id="container"></div>
</template>
<script>
import { Chart } from "@antv/g2";
export default {
  mounted() {
    // 数据源
    const data = [
      { time: "8/1", value: 240 },
      { time: "8/10", value: 600 },
      { time: "8/20", value: 350 },
      { time: "8/31", value: 470 },
    ];
    // 初始化图表，列出图表属性
    const chart = new Chart({
      container: "container",
      autoFit: true,
      height: 276,
      padding: [100, 20, 30, 40],
    });
    // 图表关联数据chart.position()方法决定的，在下面有设置chart.position("time*value")
    // 前面为x轴，所以 time 为 x 轴， value 为 y 轴
    chart.data(data);
    // 度量
    // x，y轴坐标系是根据
    chart.scale({
      // y轴坐标系设置
      value: {
        min: 0,
        nice: true,
        alias: "用户",
      },
      // x轴坐标系设置
      time: {
        range: [0, 1],
      },
    });
    // 提示信息
    chart.tooltip({
      // 是否显示辅助线
      showCrosshairs: true,
      // 是否合并所有点展示
      shared: false,
    });
    // value 坐标系设置
    chart.axis("value", {
      grid: null,
      tickLine: null,
    });
    // time 坐标系设置
    chart.axis("time", {
      line: null,
      tickLine: null,
    });
    // 图表绘制设置
    // 面积图
    chart
      .area()
      .position("time*value")
      .color("l(90) 0:#0b83de 1:#0c1c2d")
      .shape("smooth");
    // 折线图
    chart.line().position("time*value").color("#0b83de").shape("smooth");
    // 渲染图表
    chart.render();
  },
};
</script>