echarts tooltip自定义添加背景图+动态渲染

实现的最终效果，echarts版本使用的是5.3.1


主要用的是 extraCssText属性添加的背景图片

 tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        crossStyle: {
          color: '#999'
        }
      },
      formatter: function (params) {
        let result = '';
        const dotHtml =
          '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#1fbdd0"></span>';
        const dotHtml2 =
          '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#b18bf7"></span>';
        const dotHtml3 = `<span style="color:#fff">${params[0].axisValue}</span>`;
        const dotHtml4 = `<span style="color:#fff">${params[0].seriesName}&nbsp;:&nbsp;</span>`;
        const dotHtml5 = `<span style="color:#fff">${params[1].seriesName}&nbsp;:&nbsp;</span>`;
        const dotHtml6 = `<span style="color:#1fbdd0">${params[0].data}</span>`;
        const dotHtml7 = `<span style="color:#b18bf7">${params[1].data}</span>`;
        result +=
          dotHtml3 +
          '</br>' +
          dotHtml +
          dotHtml4 +
          dotHtml6 +
          '</br>' +
          dotHtml2 +
          dotHtml5 +
          dotHtml7;
        return result;
      },
      borderColor: 'rgba(0, 0, 0, 0)',
      padding: 15,
      extraCssText:
        'background:url(/img/charts/indicator/tootip.png) no-repeat center center ;min-width:190px;height:90px;background-size:100% 100%;'
    },

series &&
    series.forEach((v, i) => {
      legend.push(v.label);
      seriesList.push({
        name: v.label,
        data: v.data,
        type: 'bar',
        showSymbol: false,
        itemStyle: {
          normal: {
            label: {
              show: false,
              position: 'top',
              color: '#fff'
            },
            color: color.barTwoStyle[i],
            borderRadius: [10, 10, 0, 0]
          }
        },
        barWidth: 10,
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        }
      });
    });

上面的颜色样式都是写死的，图例切换的时候由于获取不到值就会报错。通过循环params可以动态展示

 formatter: function (params) {
        const list = [];
        let listItem = `<span style="color:#fff">${params[0].axisValue}</span><br>`;
        for (let i = 0; i < params.length; i++) {
          list.push(
            '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
              params[i].color +
              ';margin-right: 5px;}">' +
              '</i><span style="min-width:10px; display:inline-block;color:#fff">' +
              params[i].seriesName +
              '&nbsp;' +
              ':' +
              '</span>' +
              '<span style="color:' +
              params[i].color +
              '">' +
              '&nbsp;' +
              params[i].value +
              '</span>'
          );
        }
        listItem += list.join('<br>');
        return '<div>' + listItem + '</div>';
      },