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

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

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

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

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

option = {
  tooltip: {
    show: true,
    trigger: 'axis',
    appendTo: 'body',
    formatter: (params) => {
      // tooltip 标题
      let titleHtmlStr = `
${params[0].name}
`;

      // tooltip 详情内容
      const itemHtmlStrArr = params.map((item) => {return `

          ${item.marker}
          
${item.seriesName}
          ${item.value}%
        
`;
      });
      const contentHtmlStr = `

        ${itemHtmlStrArr.join('')}
      
`;

      // 最终 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]
    }
  ]
};