How to add data to a Tooltip in a echart graph

Viewed 11

i have this bar graph made with echar, and i want to add information to the tooltip that it shows when you select a bar in the graph, how can i to do that?

this is the graphic code:

option: {
        title: {
          text: "Unidades que Necesitan Mantenimiento por Kilometro",
          //subtext: "Living Expenses in Shenzhen",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Kilometraje Excedido",
            type: "bar",
            barWidth: "60%",
            data: [],
          },
        ],
      },

here i load actually the information from my request, i want to load the information from Año_del_Modelo and Fecha_del_Ultimo_Servis also i want to add a label that says "Modelo", and "Ultimo Servis":

async obtenerUnidadesMantenimientoImportante() {
      var respuesta;

      this.url =
        this.urlBase + "reporte/obtenerunidadesmantenimientoimportante";

      const config = {
        headers: {
          Authorization: `Bearer ${sessionStorage.getItem("Token")}`,
        },
      };

      respuesta = await this.$http
        .get(this.url, config)
        .then((response) => response.data);

      var i = 0;

      while (i < 9) {
        this.modelos.push(respuesta[i].Año_del_Modelo);
        this.ultMantenimientos.push(respuesta[i].Fecha_del_Ultimo_Servis);
        this.option.xAxis[0].data.push(respuesta[i].Unidad);
        this.option.series[0].data.push(
          respuesta[i].Km_Restante_de_Proximo_Servis * -1
        );
        i++;
      }
    },

enter image description here

0 Answers
Related