ecahrts图表之tooltip中展示列表

遇到个需求，在柱状图图表中，鼠标移动到有数据的柱子上时展示该数据的同时，再展示数据中的列表。 数据格式如下：

let data = [
    {
        time:"2024-5",
        listT:[
            {
                count: 0
                level: "I类（红）"
                list: []
             },
             {
                count: 0
                level: "II类（橙）"
                list: []
             },
             {
                count: 0
                level: "III类（黄）"
                list: []
             },
        ]
    },
    {
        time:"2024-4",
        listT:[
            {
                count: 0
                level: "I类（红）"
                list: []
             },
             {
                count: 0
                level: "II类（橙）"
                list: []
             },
             {
                count: 0
                level: "III类（黄）"
                list: []
             },
        ]
    },
    {
        time:"2024-3",
        listT:[
            {
                count: 0
                level: "I类（红）"
                list: []
             },
             {
                count: 0
                level: "II类（橙）"
                list: []
             },
             {
                count: 0
                level: "III类（黄）"
                list: []
             },
        ]
    },
]

此时已获取所有图表所需要展示的数据，需要鼠标移动至柱子上时显示有数据的list列表表格.这时需要用到tooltip中的formatter

做法如下：

//warnDataOption为图表的option，tooltip为图例
warnDataOption.tooltip={
 trigger: "item",
 appendToBody: true,
 backgroundColor: "rgba(0, 0, 0, 0.5960784314)",
 color: '#fff',
 borderWidth: "1",//边框宽度1
 borderColor: "rgba(0, 0, 0, 0.5960784314)",
 textStyle: {
     color: '#fff'
 },
 formatter:function (params) {
     let warnList = []
     warnList = res.data.filter((el: any) => {
         return el.time === params.name
     })[0].listT;
     var htmlStr = "<div>";
     htmlStr += params.name + "<br/>";
     warnList.filter(el => el.level === params.seriesName)[0].list.length > 0 ?
                        htmlStr += `<span style="background-color:${params.color};display:inline-block;border-radius: 50%;margin:10px;display:flex;width:300px;heigth:50px">
                                        ${params.seriesName}&nbsp;&nbsp;&nbsp;${params.value}</br>
                                    </span>
                                    <span style="display:inline-block;width:100%;color:#fff;margin:0px;display:flex;justify-content: space-between;height:20px;font-size:12px">
                                        <span style="display:inline-block;width:20%">序号</span>
                                        <span style="display:inline-block;width:30%">预警时间</span>
                                        <span style="display:inline-block;width:50%">预警部位</span>
                                    </span>
                                    `: htmlStr += `<span style="background-color:${params.color};display:inline-block;border-radius: 50%;margin:10px;display:flex;width:150px;heigth:50px">
                                        ${params.seriesName}&nbsp;&nbsp;&nbsp;${params.value}</br>
                                    </span>
                                    `
                    warnList.filter(el => el.level === params.seriesName)[0].list.forEach((item, i) => {
                        htmlStr += `<span style="display:inline-block;width:100%;color:#fff;margin:0px;display:flex;justify-content: space-between;height:20px;font-size:12px">
                                                <span style="display:inline-block;width:20%">${i + 1}</span>
                                                <span style="display:inline-block;width:30%">${item.warningtime.length > 5 ? item.warningtime.slice(0, 10) : item.warningtime}</span>
                                                <span style="display:inline-block;width:50%">${item.devicename}</span>
                                            </span>`;
                    })
                    htmlStr += "</div>";
                    return htmlStr;
 }
}