ECharts tooltip默认html样式，保留样式只对数据数值格式化

之前遇到过需要对数据进行百分比展示，echarts提供的默认样式还是挺好的所以想保留样式，但是设置了formatter默认样式就没了，所以写了formatter的html字符串模拟还原了一下默认样式，在此记录和分享。

适用场景：对数据进行处理或格式化但想保留默认tooltip样式

示例截图：在tooltip中对数据添加了%

 效果查看：将代码复制到 echarts解析  

option = {
  tooltip: {
    show: true,
    trigger: 'axis',
    appendTo: 'body',
    formatter: (params) => {
      // tooltip标题
      let titleHtmlStr = `<div style="font-size:14px;color:#666;font-weight:400;line-height:1;">${params[0].name}</div>`;
 
      // tooltip详情内容
      const itemHtmlStrArr = params.map((item) => {
        return `<div style="display: flex;align-items:center;">
          ${item.marker}
          <div style="font-size: 14px;color: #666;margin: 0 20px 0 2px;">${item.seriesName}</div>
          <span style="margin-left: auto;text-align: right;font-weight: 900;">${item.value}%</span>
        </div>`;
      });
      const contentHtmlStr = `<div style="display: flex;flex-direction: column;margin-top: 10px;">
        ${itemHtmlStrArr.join('')}
      </div>`;
 
      // 最终html字符串
      const resHtmlStr = titleHtmlStr + contentHtmlStr;
      return resHtmlStr;
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      smooth: true,
      data: [12.2, 13.3, 10.1, 13.6, 40.5, 23.6, 21.3]
    },
    {
      name: 'Union Ads',
      type: 'line',
      smooth: true,
      data: [22.1, 18.4, 19.6, 23.5, 29.3, 33.9, 31.2]
    }
  ]
};复制