echarts的tooltip悬浮窗的自定义

我是一个前端小白刚刚接触工作，来分享一下我碰到的需求问题和自己的解决办法，希望能帮助到大家。

先给大家介绍一下需求（其实很简单）：鼠标在2014-2024之间显示‘存量’和‘兆瓦’，到2025只显示‘十四五目标’。

但是大家肯定知道 echarts的悬浮窗只要series中有这一项tooltip中就会显示出来。所以这个需求对我这个小白来说还挺头疼。在学习了官方文档后，我认知了formatter 这个自定义项。formatter 分为字符串和函数两个写法，如果想要真正意义上的自定义我觉得还是函数更好用。

下面说一下我的思路。

（1）根据formatter的params 参数，通过判断 x轴坐标轴的值来达到十四五在2025年前不显示，2025年只显示十四五。（这个效果很好实现，关键是自定义后之前悬浮窗的样式就都没了）

tooltip: {
            trigger: "axis",
            formatter: (item) =&gt; {
              //将复用的模板字符串封装成函数，这里就相当于tooltip中显示的一行数据如下图
              //通过输入val，就能判断这个是series的第几个数据，0 是存量，1是增量，2是十四五
              //字符串中出入了三个数据分别用处是：小圆点颜色、数据名、数值，都是能在formatter的params中获取的，我这里命名为item
              function str(val) {
                return `
               &lt;div class='hang'&gt;
                &lt;div style="display:flex;align-items: baseline;"&gt;
                  <div class="small" style='background-color:${item[val].color};'&gt;</div&gt;
                  <div style:"float:left">${item[val].seriesName}</div>  
                </div>
                <div style='font-weight:700'>${item[val].value}</div>
               </div>
                `;
              }
              //这里判断如果不是2025年就显示 存量和增量
              if (item[0].name != "2025") {
                return `
              <div class='echarts-tooltip'>
              ${item[0].name}<br>
               ${str(0)}
               ${str(1)}
              `;
              } 
              else {  //如果是2025年就显示 十四五
                return `
              <div class='echarts-tooltip'>
              ${item[0].name}<br>
               ${str(2)}
              `;
              }
            },
          },