echarts的tooltip悬浮窗的自定义

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

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

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

  下面说一下我的思路。

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

（2）通过模板字符串自定义tooltip样式。

（3）return 这个模板字符串让tooltip达到最终效果。

先上代码

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

 

 大家能看到模板字符串中我用了许多类名，这里还有一个注意点就是类名前一定要加::v-deep否则不生效

其实还是很简单的，希望自己的经验能够帮到大家，看看我的代码有没有优化的空间。 

欢迎大家在评论区留言。