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

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


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

 tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        crossStyle: {
          color: '#999'
        }
      },
      formatter: function (params) {
        let result = '';
        const dotHtml =
          '';
        const dotHtml2 =
          '';
        const dotHtml3 = `${params[0].axisValue}`;
        const dotHtml4 = `${params[0].seriesName} : `;
        const dotHtml5 = `${params[1].seriesName} : `;
        const dotHtml6 = `${params[0].data}`;
        const dotHtml7 = `${params[1].data}`;
        result +=
          dotHtml3 +
          '
' +
          dotHtml +
          dotHtml4 +
          dotHtml6 +
          '
' +
          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 = `${params[0].axisValue}
`;
        for (let i = 0; i < params.length; i++) {
          list.push(
            '+
              params[i].color +
              ';margin-right: 5px;}">' +
              '' +
              params[i].seriesName +
              ' ' +
              ':' +
              '' +
              '+
              params[i].color +
              '">' +
              ' ' +
              params[i].value +
              ''
          );
        }
        listItem += list.join('
');
        return '' + listItem + '';
      },