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

大橙子-

已于 2024-10-23 16:30:52 修改

阅读量837

点赞数 18

文章标签： echarts 前端 javascript

于 2024-08-23 15:15:29 首次发布

本文链接：https://blog.csdn.net/weixin_44260173/article/details/141466259

版权

之前遇到过需要对数据进行百分比展示，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]
    }
  ]
};

2024-10-23更新

今天发现另一个属性：tooltip.valueFormatter 可以直接格式化value，但是不影响默认样式，如果只是简单的数据格式化可以用这个替代上面的方案。

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

option = {
  tooltip: {
    show: true,
    trigger: 'axis',
    appendTo: 'body',
    valueFormatter: (value)=> value + '%',
  },
  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]
    }
  ]
};