Explicación de los elementos de configuración relacionados con los gráficos electrónicos (detallados)

Explicación de los elementos de configuración relacionados

Primero comprenda las funciones de las siguientes 9 configuraciones, y luego consulte la documentación para otras configuraciones y detalles específicos: Menú Documento——Configuración manual del elemento La clave para aprender echarts es aprender a consultar documentos y modificar configuraciones según las necesidades.

Documentación oficial detallada del elemento de configuración: https://echarts.apache.org/zh/option.html#title

La siguiente es una explicación de los elementos de configuración de uso común

título: componente del título

title: {
          text: 'ECharts 入门示例'
        },

información sobre herramientas: componente de cuadro de solicitud

tooltip: {
    trigger: 'axis'
  },

Cuando el mouse se desplaza sobre un punto determinado del gráfico de líneas, aparecerá la información de este cuadro de aviso. Esta es la información sobre herramientas, y lo mismo se aplica a otros gráficos.

Cada valor de trigger se analiza:

	‘axis’：坐标轴触发，主要在柱状图，折线图等会使用。
	'item'：图形形状触发，主要用在散点图、饼图等无类目轴的图标中使用。
	'none'：什么都不触发。

análisis del formateador

	formatter: "{a} <br/>{b} : {c}({d}%)"
	a 代表 series 系列图标名称
	b 代表 series 数据名称 data 里面的 name
	c 代表 series 数据值 data 里面的 value
	d 代表当前数据/总数据的比例

leyenda : componente de la leyenda

legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },

caja de herramientas: barra de herramientas

toolbox: {
    feature: {
      saveAsImage: {}
    }
  },

grid : la cuadrícula de dibujo en el sistema de coordenadas cartesianas

grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },

El área en el marco rojo es la cuadrícula.
izquierda, derecha e inferior son la distancia desde la cuadrícula hasta el cuadro grande, que también se puede considerar como el margen;
containerLabel:true significa mostrar el número del eje y (escala o regla), si no agrega esta oración + izquierda: 0%, la cuadrícula de la cuadrícula coincidirá con la izquierda del cuadro.
Cuando la etiqueta de escala se desborda, si el área de la cuadrícula contiene la etiqueta de escala del eje de coordenadas. Si es verdadero, se muestran las marcas; si es falso, no se muestran las marcas. Si la izquierda, la derecha, la parte inferior, etc. se configuran en 0%, la etiqueta de la escala se desbordará y en este momento se decide si mostrar la etiqueta de la escala.

eje x: eje x

 xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },

tipo: 'categoría' significa el eje de categoría, que es adecuado para datos de categoría discretos. Para este tipo, los datos de categoría deben configurarse a través de data .
borderGap: false significa dividir la línea y el espacio. El valor predeterminado es verdadero. En este momento, la escala solo se usa como separador, y las etiquetas y los puntos de datos estarán en el medio de la banda entre las dos escalas .

borderGap: cuando es cierto

fronteraGap: falso

eje y: eje y

 yAxis: {
    type: 'value'
  },

No se requiere modificación, se modificará automáticamente según los datos del eje x.

serie : lista de series (énfasis)

¡Hay tantas líneas como objetos! ! !

1. tipo determina su propio tipo de icono (qué tipo de icono)

2. nombre: nombre de la serie, utilizado para la visualización de información sobre herramientas, cambio de filtro de leyenda de leyenda

3. stack: Apilamiento de datos. Si se establece el mismo valor, los datos se apilarán.
   Apilamiento de datos:
   segundo valor de datos = primer valor de datos + segundo valor de datos tercer
   valor de datos = segundo valor de datos + tercer valor de datos ... apilados en secuencia

   Si especifica un valor diferente para stack o elimina este atributo , no se producirá el apilamiento de datos.

La configuración y el uso de radio, centro, roseType

radio: ["10%", "70%"] Si es un porcentaje, se deben agregar comillas dobles.
radio: [50,100] Si es un valor de píxel, no necesita agregar comillas dobles.

radio: ["10%", "70%"] significa que el radio del círculo interior es del 10%; el radio del círculo exterior es del 70%.
centro: ["50%", "50%"] indica que la posición del gráfico está centrada horizontal y verticalmente.
roseType: “radius” (modo de radio) o roseType: “area” (modo de área)

Si la fuente está fuera del alcance del cuadro y está bloqueada por el cuadro, puede usar el siguiente método:

Método 1:
Hacer la fuente más pequeña en
el objeto de etiqueta de la serie

Método 2:
Hacer la línea guía un poco más corta
El objeto labelLine en la serie

color : lista de colores de la paleta

Si solo se escribe un color, el efecto es que las cinco polilíneas son de este color. El punto es que el color debe escribirse entre la información sobre herramientas y la serie.

color: ['pink','blue','skyblue','red','purple'],

resumen

Solo dos de los nueve elementos de configuración son matrices: lista de colores y series