Javascript 在图表图例（Echarts）上显示工具提示

我实现了一个基于Echarts图书馆的图例图表。我现在要开发的是图表图例中每个数据的工具提示。数据准备为对象数组，每个名称都有相应的描述，我想在工具提示上显示这些描述。换句话说，我希望在鼠标悬停在图例名称上后显示下图中的工具提示

{{trans（'app.icd10_代码'）}
@如果（计数（$binnedIcds['targetIcds']['code']）>0）
{{count（$binnedIcds['targetIcds']['code']）}
{{trans（'app.skin_disease_groups'）}
@恩迪夫

NewIcdTile.js

class NewIcdChart
{
  constructor(ctx, targetsLabels, othersLabel, undefLabel, targetsTooltips, othersTooltip,
    undefTooltip, nTargets, nOthers, nTotal)
  {

    this.othersColor = '#888888';
    this.undefColor = '#cccccc';

    var labels = {
      targetsLabels,
      othersLabel,
      undefLabel
    };

    var tooltips = {
      targetsTooltips,
      othersTooltip,
      undefTooltip,
    };

    var nTargetImages = nTargets.reduce((a,b) => a + b, 0);
    var nUndef = nTotal - nTargetImages - nOthers;
    var counts = {
      nTargets,
      nOthers,
      nTotal,
      nUndef, 
    };

    this.chart;
    this.hasOthers = false;
    this.hasUndef = false;
    this.drawChart(ctx, labels, tooltips, counts);
  }




drawChart(ctx, labels, tooltips, counts){



var otherValue=counts.nOthers;

var otherLabel=labels.othersLabel;

var otherTooltip=tooltips.othersTooltip;

var undefinedValue=counts.nUndef;

var undefinedLabel=labels.undefLabel;

var undefinedTooltip=tooltips.undefTooltip;

var targetValues=counts.nTargets;

var targetLabels=labels.targetsLabels;

var targetTooltip=tooltips.targetsTooltips;





var finalChartValue=[];




for(var i=0; i<targetValues.length; i++){

    for(var i=0; i<targetLabels.length; i++){

        for(var i=0; i<targetTooltip.length; i++){

            var  obj = {"value": targetValues[i], "name": targetLabels[i], "tooltip": targetTooltip[i]};
            finalChartValue.push(obj);
        }
    }
}




var otherObject={
    value: otherValue,
    name : otherLabel,
    tooltip : otherTooltip

};

var undefinedObject={
    value: undefinedValue,
    name : undefinedLabel,
    tooltip : undefinedTooltip
};


finalChartValue.unshift(otherObject, undefinedObject);

console.log("finalChartValue", finalChartValue);

var finalChartLables=[];
 finalChartValue.forEach(function(res) {
        finalChartLables.push(res.name);
});






// specify chart configuration item and data
var option = {

    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}  : {c}",


    },

    legend: {
        x : 'center',
        y : 'bottom',
        padding: 1,

        formatter: function(name) { 
          var data = this.getSeries()[0].data;  
          var totalValue = data.reduce((acc, item) => { 
            acc += item.value;
            return acc;
          }, 0)
          var targetValue;
          var targetTooltip;  
          data.map(item => {
            if (item.name == name) {
              targetValue = item.value; 
              targetTooltip= item.tooltip;
            }
          })
          var p = (targetValue / totalValue * 100).toFixed(2); 
          console.log("name", name);
          return name  + ' ' + p + '%';
        },

        data:finalChartLables
    },
    toolbox: {
        show: true,
        feature: {

            dataView: { show: true, readOnly: false },
            magicType: {
                show: true,
                type: ['pie']
            },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    color: ["#f62d51", "#dddddd", "#ffbc34", "#7460ee", "#009efb", "#2f3d4a", "#90a4ae", "#55ce63"],
    calculable: true,
    series: [{
            name: 'ICD',
            type: 'pie',
            radius: [20, 180],
            center : ['50%', '50%'],
            roseType: 'radius',
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                        formatter: "{b} :  \n ({c})",
                        fontWeight: 100
                    },
                    labelLine: {
                        show: false,
                        formatter: "{b} :   \n ({c})",
                        fontWeight: 100
                    }

                },
                emphasis: {
                    label: {
                        show: true,
                        formatter: "{b} :  \n ({c})",
                        fontWeight: 100

                    },
                    labelLine: {
                        show: true,
                        formatter: "{b} :  \n ({c})",
                        fontWeight: 100

                    }
                }
            },
            data: finalChartValue
        },


    ]
};



// use configuration item and data specified to show chart
ctx.setOption(option, true), $(function() {
    function resize() {
        setTimeout(function() {
            ctx.resize()
        }, 100)
    }
    $(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
});
  console.log("ctx", ctx);

}

}

class-NewIcdChart
{
建造商（ctx、TargetsLabel、othersLabel、undefLabel、targetsTooltips、othersTooltip、，
未定义工具提示、nTargets、其他、nTotal）
{
this.othersColor='#8888888'；
this.undefColor='#cccc'；
变量标签={
目标斯拉贝尔，
其他斯拉贝尔，
未定义标签
};
变量工具提示={
targetsTooltips，
另一方面，
工具提示，
};
var nTargetImages=nTargets.reduce（（a，b）=>a+b，0）；
var nUndef=nTotal-nTargetImages-others；
变量计数={
n目标，
其他人，
总的，
努德夫，
};
这张图表；
this.hasOthers=false；
this.hasunfe=false；
这个绘图图（ctx、标签、工具提示、计数）；
}
绘图图（ctx、标签、工具提示、计数）{
var otherValue=计数。其他值；
var otherLabel=labels.othersLabel；
var otherTooltip=tooltips.otherstootip；
var undefinedValue=counts.nUndef；
var undefinedLabel=labels.undefLabel；
var undefinedTooltip=工具提示。undefTooltip；
var targetValues=counts.nTargets；
var targetLabels=labels.targetsLabels；
var targetTooltip=tooltips.targetstootips；
var finalChartValue=[]；
对于（var i=0；i{
如果（item.name==名称）{
targetValue=item.value；
targetTooltip=item.tooltip；
}
})
var p=（目标值/总值*100）.toFixed（2）；
console.log（“name”，name）；
返回名称+''+p+'%'；
},
数据：最终分类
},
工具箱：{
秀：没错，
特色：{
数据视图：{show:true，readOnly:false}，
magicType：{
秀：没错，
类型：['pie']
},
还原：{show:true}，
saveAsImage:{show:true}
}
},
颜色：[“f62d51”、“DDDD”、“ffbc34”、“7460ee”、“009efb”、“2f3d4a”、“90a4ae”、“55ce63”]，
可计算的：是的，
系列：[{
名称：'ICD'，
键入“pie”，
半径：[20，180]，
中心：['50%，'50%']，
玫瑰型：“半径”，
项目样式：{
正常：{
标签：{
秀:假,，
格式化程序：“{b}:\n（{c}）”，
体重：100
},
拉贝林：{
秀:假,，
格式化程序：“{b}:\n（{c}）”，
体重：100
}
},
重点：{
标签：{
秀：没错，
格式化程序：“{b}:\n（{c}）”，
体重：100
},
拉贝林：{
秀：没错，
格式化程序：“{b}:\n（{c}）”，
体重：100
}
}
},
数据：finalChartValue
},
]
};
//使用指定的配置项和数据显示图表
setOption（option，true），$（function（）{
函数resize（）{
setTimeout（函数（）{
ctx.resize（）
}, 100)
}
$（窗口）。在（“调整大小”，调整大小），$（“.sidebartoggler”）。在（“单击”，调整大小）
});
控制台日志（“ctx”，ctx）；
}
}

您可以添加

工具提示

选项，并在

图例

选项中添加

格式化程序

功能，当鼠标悬停时，该功能将在图例顶部显示工具提示。例如：

var chart1=echart.init（document.getElementById（“chart1”）；
var选项={
工具提示：{
秀：没错，
格式化程序：{a}
{b}:{c}（{d}%）“
},
系列：[
{
姓名：“随便”，
键入：“馅饼”，
数据：[
{name:“A”，值：100}，
{名称：“B”，值：150}
]
}
],
图例：{
数据：[“A”、“B”]，
工具提示：{
秀：没错，
格式化程序：函数（参数）{
var总计=0，
cur_item=null；
var _selected=chart1.getOption（）.legend[0]。选中；
if（_selected[params.name]==false）返回；//如果未选中图例，则无工具提示。
对于（var i=0；iclass NewIcdChart
{
  constructor(ctx, targetsLabels, othersLabel, undefLabel, targetsTooltips, othersTooltip,
    undefTooltip, nTargets, nOthers, nTotal)
  {

    this.othersColor = '#888888';
    this.undefColor = '#cccccc';

    var labels = {
      targetsLabels,
      othersLabel,
      undefLabel
    };

    var tooltips = {
      targetsTooltips,
      othersTooltip,
      undefTooltip,
    };

    var nTargetImages = nTargets.reduce((a,b) => a + b, 0);
    var nUndef = nTotal - nTargetImages - nOthers;
    var counts = {
      nTargets,
      nOthers,
      nTotal,
      nUndef, 
    };

    this.chart;
    this.hasOthers = false;
    this.hasUndef = false;
    this.drawChart(ctx, labels, tooltips, counts);
  }




drawChart(ctx, labels, tooltips, counts){



var otherValue=counts.nOthers;

var otherLabel=labels.othersLabel;

var otherTooltip=tooltips.othersTooltip;

var undefinedValue=counts.nUndef;

var undefinedLabel=labels.undefLabel;

var undefinedTooltip=tooltips.undefTooltip;

var targetValues=counts.nTargets;

var targetLabels=labels.targetsLabels;

var targetTooltip=tooltips.targetsTooltips;





var finalChartValue=[];




for(var i=0; i<targetValues.length; i++){

    for(var i=0; i<targetLabels.length; i++){

        for(var i=0; i<targetTooltip.length; i++){

            var  obj = {"value": targetValues[i], "name": targetLabels[i], "tooltip": targetTooltip[i]};
            finalChartValue.push(obj);
        }
    }
}




var otherObject={
    value: otherValue,
    name : otherLabel,
    tooltip : otherTooltip

};

var undefinedObject={
    value: undefinedValue,
    name : undefinedLabel,
    tooltip : undefinedTooltip
};


finalChartValue.unshift(otherObject, undefinedObject);

console.log("finalChartValue", finalChartValue);

var finalChartLables=[];
 finalChartValue.forEach(function(res) {
        finalChartLables.push(res.name);
});






// specify chart configuration item and data
var option = {

    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}  : {c}",


    },

    legend: {
        x : 'center',
        y : 'bottom',
        padding: 1,

        formatter: function(name) { 
          var data = this.getSeries()[0].data;  
          var totalValue = data.reduce((acc, item) => { 
            acc += item.value;
            return acc;
          }, 0)
          var targetValue;
          var targetTooltip;  
          data.map(item => {
            if (item.name == name) {
              targetValue = item.value; 
              targetTooltip= item.tooltip;
            }
          })
          var p = (targetValue / totalValue * 100).toFixed(2); 
          console.log("name", name);
          return name  + ' ' + p + '%';
        },

        data:finalChartLables
    },
    toolbox: {
        show: true,
        feature: {

            dataView: { show: true, readOnly: false },
            magicType: {
                show: true,
                type: ['pie']
            },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    color: ["#f62d51", "#dddddd", "#ffbc34", "#7460ee", "#009efb", "#2f3d4a", "#90a4ae", "#55ce63"],
    calculable: true,
    series: [{
            name: 'ICD',
            type: 'pie',
            radius: [20, 180],
            center : ['50%', '50%'],
            roseType: 'radius',
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                        formatter: "{b} :  \n ({c})",
                        fontWeight: 100
                    },
                    labelLine: {
                        show: false,
                        formatter: "{b} :   \n ({c})",
                        fontWeight: 100
                    }

                },
                emphasis: {
                    label: {
                        show: true,
                        formatter: "{b} :  \n ({c})",
                        fontWeight: 100

                    },
                    labelLine: {
                        show: true,
                        formatter: "{b} :  \n ({c})",
                        fontWeight: 100

                    }
                }
            },
            data: finalChartValue
        },


    ]
};



// use configuration item and data specified to show chart
ctx.setOption(option, true), $(function() {
    function resize() {
        setTimeout(function() {
            ctx.resize()
        }, 100)
    }
    $(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
});
  console.log("ctx", ctx);

}

}