Echarts 散点图的 tooltip 自定义formatter方法（展示X、Y、value之外的数据）

• 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);
        })
      },
  

  ​