1.效果展示，如图，tooltip的构成是指标名+实际值+【目标值】

2.后端的数据结构

3.完整代码：主要就是将需要展示的字段数据拼好放到tooltipInfo里

    initLeftEcharts() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      let param = {statsDimCd:"mon",dtMon:year+"-"+month}
      const xAxisData = [];
      const yAxisData = [];
      const tooltipData = [];
      
      myApi.dailyQueryMon(param).then(response=>{
           response.forEach(fr=>{
             xAxisData.push(fr.proLineName)
             let yData = [];
             let toolData = [];
             fr.matterVoList.forEach(se=>{
               if(se.retValue!=='0.0'&&se.retValue!==null){
                 yData.push(se.retValue)
                 toolData.push({
                   indicatorName: se.indicatorName,
                   retValue: se.retValue,
                   indicatorTarget: se.indicatorTarget
                 });
               }
             })
             yAxisData.push(yData);
             if(toolData.length>0){
               tooltipData.push(toolData);
             }else{
               tooltipData.push({
                 indicatorName: "无数据",
                 retValue: 0,
                 indicatorTarget: "无数据"
               });
             }
           })
        const leftEcharts = echarts.init(this.$refs.left);

        const seriesData = xAxisData
          .map((workshop, index) => {
            return yAxisData[index].map((cpk, idx) => ({
              name: workshop,
              value: [workshop, cpk],
              itemStyle: { color: `hsl(${index * 30}, 70%, 50%)` }, // 通过颜色区分不同车间
              tooltipInfo: tooltipData[index][idx] // 保存对应的tooltip数据
            }));
          })
          .flat();


        const option = {
          grid:{
            right:"5%"
          },
          title: {
            text: "关键质量指标监控",
            left: "center",
            textStyle: {
              color: "#A6CEE1",
            },
            top: 10,
          },
          tooltip: {
            trigger: "axis",
            showDelay: 0,
            formatter: function (params) {
              if (params.length > 0) {
                let tooltipStr = "";
                params.forEach(e => {
                  const info = e.data.tooltipInfo;
                  tooltipStr += `
        <div style="margin-bottom: 5px;">
          <span style="font-weight: bold; color: #A6CEE1;">${info.indicatorName}:</span>
          <span style="color: red;">${info.retValue}</span>
          <span style="color: green;">【${info.indicatorTarget}】</span><br/>
        </div>`;
                });
                return tooltipStr;
              } else {
                return 'No data available';
              }
            }
          },
          xAxis: {
            type: "category",
            data: xAxisData,
            axisLabel: {
              rotate: 30,
              show: true,
              textStyle: {
                color: "#A6CEE1",
              },
            },
          },
          yAxis: [
            {
              type: "value",
              name: "合格率(%)",
              min: 0,
              max: 100,
              axisLabel: {
                margin: 20,
                textStyle: {
                  color: "white",
                  margin: 15,
                },
              },
              nameTextStyle:{
                color:"white"
              }
            },
          ],
          series: [
            {
              type: "scatter",
              data: seriesData,
              itemStyle: {
                color: "#A6CEE1",
              },
            },
          ],
        };

        leftEcharts.setOption(option);
      })
    },

​