echart 多x轴tooltip显示表格

    formatter: function (params: any[]) {
        // 创建表格的HTML结构
        var tooltipHtml = '<div style="font-family: Arial, sans-serif; color: #333;">'
        // 创建表格
        tooltipHtml += '<table style="width: 100%; border-spacing: 0; border-collapse: collapse;">'

        tooltipHtml += '<tr>'
        tooltipHtml +=
          '<td style="padding: 8px; font-weight: bold; text-align: center; border: 1px solid #ccc;">数据项</td>'

        // 使用集合来存储 X 轴的列（避免重复显示）
        var axisIndices: any[] = []
        params.forEach(function (item: { axisIndex: string; name: string }) {
          // 只在 axisIndex 发生变化时显示
          if (axisIndices.indexOf(item.axisIndex) === -1) {
            tooltipHtml +=
              '<td style="padding: 8px; font-weight: bold; text-align: center; border: 1px solid #ccc;">' +
              item.name +
              '</td>'
            axisIndices.push(item.axisIndex) // 记录已显示的 axisIndex
          }
        })
        tooltipHtml += '</tr>'

        // 使用一个 Set 来确保唯一的系列名称
        var seriesNames: Set<string> = new Set()
        var seriesMarkers: { [key: string]: string } = {} // 用于存储每个系列的标记图标

        // 遍历 params 获取唯一的系列名称并记录其 marker
        params.forEach(function (item: { seriesName: string; marker: string }) {
          if (!seriesNames.has(item.seriesName)) {
            seriesNames.add(item.seriesName)
            seriesMarkers[item.seriesName] = item.marker // 存储该系列的标记图标
          }
        })

        // 第二行及之后：显示每个系列的数据
        seriesNames.forEach(function (seriesName) {
          tooltipHtml += '<tr>'

          // 获取当前系列的标记图标（marker）
          var marker = seriesMarkers[seriesName]

          // 显示标记图标和系列名称
          tooltipHtml +=
            '<td style="padding: 8px; text-align: left; border: 1px solid #ccc;">' +
            marker +
            seriesName +
            '</td>'

          // 遍历每个 X 轴的数据
          axisIndices.forEach(function (axisIndex) {
            var found = false
            // 遍历params中的每一项，查找匹配的系列和 X 轴
            params.forEach(function (item: { seriesName: any; axisIndex: any; value: any }) {
              if (item.seriesName === seriesName && item.axisIndex === axisIndex) {
                tooltipHtml +=
                  '<td style="padding: 8px; text-align: center; border: 1px solid #ccc;">' +
                  (item.value || '-') +
                  '</td>'
                found = true
              }
            })
            // 如果找不到该系列在该X轴的数据，显示空白
            if (!found) {
              tooltipHtml +=
                '<td style="padding: 8px; text-align: center; border: 1px solid #ccc;"></td>'
            }
          })
          tooltipHtml += '</tr>'
        })

        // 结束表格
        tooltipHtml += '</table>'
        tooltipHtml += '</div>'

        return tooltipHtml // 返回自定义的 HTML 内容
      }