Escriba aquí el título del directorio
¿Qué es la información sobre herramientas?
La información sobre herramientas es un componente del cuadro de aviso, que en realidad es una descripción de detalles de puntos de datos similares que se muestran después de mover el mouse sobre el gráfico.
En el elemento de configuración de opciones, que se encuentra en el directorio de primer nivel, la información sobre herramientas está en el mismo nivel que series, xAxis y yAxis.
¿Cómo configurar el formateador?
Documento oficial: https://echarts.apache.org/zh/option.html#tooltip.formatter
El formateador tiene dos métodos de configuración: ① plantilla de cadena ② función de devolución de llamada
①Plantilla de cadena
formatter: '{b0}: {c0}<br />{b1}: {c1}'
Hay variables de plantilla {a}, {b}，{c}，{d}，{e}, que representan respectivamente nombres de series, nombres de datos, valores de datos, etc. Cuando el disparador es "eje", habrá varias series de datos. En este momento, el índice de la serie se puede representar mediante {a0}, {a1}, {a2} seguido de un índice. {a}, {b}, {c}, {d} en diferentes tipos de gráficos tienen diferentes significados.
Las variables {a}, {b}, {c}, {d} representan datos en diferentes tipos de gráficos y sus significados son:
| tipo de gráfico | significado |
|---|---|
| Gráfico de líneas (áreas), gráfico de columnas (barras), gráfico de líneas K | {a} (nombre de la serie), {b} (valor de categoría), {c} (valor), {d} (ninguno) |
| Gráfico de dispersión (burbuja) | {a} (nombre de la serie), {b} (nombre de los datos), {c} (matriz numérica), {d} (ninguno) |
| mapa | {a} (nombre de la serie), {b} (nombre de la región), {c} (valor combinado), {d} (ninguno) |
| Gráficos circulares, paneles de control, gráficos de embudo | {a} (nombre de la serie), {b} (nombre del elemento de datos), {c} (valor), {d} (porcentaje) |
Resumen: el grado de libertad de las plantillas de cadenas es relativamente bajo y debe basarse en varias variables de plantilla establecidas, como {a}, {b}, {c}, {d}, {e}
, que representan respectivamente el nombre de la serie. , nombre de datos, valor de datos, etc. Cuando se utiliza el empalme para la visualización, solo se pueden mostrar los datos que se ven en el gráfico mostrado. Si implica la visualización de otros campos de datos ocultos, excepto las coordenadas horizontales y verticales, la plantilla de cadena no tiene poder .
Ejemplo de plantilla de cadena:
Efecto:
código:
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis',
formatter: "类目值：{b0}<br/> {a0}:{c0}封 <br/>{a1}:{c1}个 <br/>{a2}:{c2}条"
},
legend: {
data: ['Email', 'Direct', 'Search Engine']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
②Función de devolución de llamada
Formato de la función de devolución de llamada:
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]
La situación de la función de devolución de llamada es un poco más complicada, comencemos directamente desde el ejemplo y prestemos atención a los comentarios del ejemplo.
Ejemplo de función de devolución de llamada:
let res = [ // 接口数据返回格式
{
"num":1,
"supplyTime": 34,
"supplySort": "1",
"podCode": "X0005",
"startTime": "2023-01-14 05:54:44",
},
{
"num":2,
"supplyTime": 28,
"supplySort": "1",
"podCode": "X005",
"startTime": "2023-01-14 09:54:44",
},
{
"num":3,
"supplyTime": 17,
"supplySort": "1",
"podCode": "X000",
"startTime": "2023-01-14 08:54:44",
},
{
"num":4,
"supplyTime": 2,
"supplySort": "1",
"podCode": "X035",
"startTime": "2023-01-14 09:54:44",
},
{
"num":5,
"supplyTime": 26,
"supplySort": "1",
"podCode": "0035",
"startTime": "2023-01-14 19:54:44",
},
]
option = {
tooltip: {
formatter: (params) => {
// 打印确认params是对象还是数组
console.log(params)
// 对象：取鼠标悬浮当前项索引params.dataIndex
// 数组：取鼠标悬浮当前项索引params[0].dataIndex
let index = params.dataIndex
let obj = res[index] // 通过索引取当前项完整的接口返回值
let str = `出发顺序：${
obj.supplySort}<br/>
仓位码：${
obj.podCode}<br/>
任务生成时间：${
obj.startTime}<br/>`
return str
}
},
xAxis: {
type: 'category',
data: res.map(i => {
return i.num})
},
yAxis: {
type: 'value'
},
series: [
{
data: res.map(i => {
return i.supplyTime}),
type: 'bar',
}
]
}
El primer parámetro params de arriba es el conjunto de datos requerido por el formateador, que son algunos datos de la columna actual cuando pasamos el mouse. Lo imprimimos para ver cuáles se pueden usar: Como puede ver al imprimir, params solo tiene los valores de los ejes horizontal y vertical
, así como el color y otros datos, no hay secuencia inicial, código de posición y otros datos que queramos mostrar. Pero podemos obtener el índice del elemento actual dataIndex. Con el índice params.dataIndexmás el valor de retorno de la interfaz res, podemos obtener directamente el objeto completo de la barra actual, es decir res[params.dataIndex]. Lo que se debe tener en cuenta aquí es que primero debe determinar si los parámetros impresos son un objeto o una matriz. En nuestro ejemplo anterior, es un objeto. Si es una matriz, el índice es params[0].dataIndex.
En el análisis final, no importa qué método se utilice, el valor de retorno del formateador es al final una cadena, por lo que lo que debemos hacer es empalmar cadenas. La ventaja de la función de devolución de llamada es que es más flexible para procesar cadenas. Y el método de llamada de atributos puede obtener lo que desea y el valor es más legible.