關(guān)于echarts各項(xiàng)內(nèi)容（包括圖表面積區(qū)域）設(shè)為漸變色已在上篇文章里全部闡述： echarts折線圖與柱狀圖等繪成漸變色的方法

單獨(dú)將tooltip拉出來(lái)再寫(xiě)一篇，是因?yàn)橛胒ormatter配合超文本的形式在echarts的配置項(xiàng)中，于自定義樣式方面很適合各類(lèi)加工以應(yīng)付UI和產(chǎn)品那邊提出的各種花里胡哨的設(shè)計(jì)

實(shí)現(xiàn)效果：

開(kāi)發(fā)頁(yè)面過(guò)程中寫(xiě)該模塊樣式時(shí)還原出的效果：

實(shí)現(xiàn)方法：

1、tooltip的shadow

在tooltip的shadowStyle里進(jìn)行配置：

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: 'rgba(255, 255, 255, 0)' },
                  { offset: 1, color: 'rgba(37, 107, 230, 0.18)' }
                ]
              ),
            }
          },
        },

2、tooltip的文本框：

這部分沒(méi)有特供的配置屬性，直接用formatter配合超文本的形式進(jìn)行樣式加工：

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: 'rgba(255, 255, 255, 0)' },
                  { offset: 1, color: 'rgba(37, 107, 230, 0.18)' }
                ]
              ),
            }
          },
          backgroundColor: 'rgba(50,50,50,0)', // tooltip默認(rèn)背景為白色，手動(dòng)置為透明
          borderWidth: 0,
          formatter: function (params) {
            let html = '';
            html += `<div style="color: #fff;font-size: 16px;height: 125px;padding: 16px;
                      background: linear-gradient(180deg, rgba(37,108,233,0.44) 0%, rgba(23,80,169,0.1) 22%, rgba(20,64,137,0) 46%, rgba(16,51,111,0.28) 77%, rgba(30,101,213,0.4) 100%);
                      border-radius: 2px;border: 1px solid;border-image: radial-gradient(circle, rgba(111, 185, 242, 0.86), rgba(0, 0, 0, 0.2)) 1 1;
                      backdrop-filter: blur(10px);">
                        <div>
                          <div style="margin-bottom: 16px">${params[0].name}</div>
                          <div style="margin-bottom: 12px">
                            <span style="display:inline-block;margin-right:4px;border:1px solid #fff;border-radius:10px;width:10px;height:10px;background-color:#0CC8E6;"></span>
                            <span style="font-size: 14px;">${params[0].seriesName}</span>
                            <span style="margin-left: 16px;color: #0CC8E6;">${params[0].value}</span>
                          </div>
                          <div>
                            <span style="display:inline-block;margin-right:4px;border:1px solid #fff;border-radius:10px;width:10px;height:10px;background-color:#08BA57;"></span>
                            <span style="font-size: 14px;">${params[1].seriesName}</span>
                            <span style="margin-left: 16px;color: #08BA57;font-weight: bold;">${params[1].value}</span>
                          </div>
                        </div>
                      </div>`;
            return html
          },
        },

其中，tooltip的marker圖例可以在formatter的參數(shù)中直接拿到：

可以直接拿來(lái)用也可以自己寫(xiě)，復(fù)制粘貼后記得去掉兩個(gè)斜杠\，案例中我是在原有的基礎(chǔ)上加了個(gè)白色邊框：

這邊值得一提的是CSS中的backdrop-filter這個(gè)屬性，在案例中實(shí)現(xiàn)了一個(gè)模糊濾鏡的效果
該屬性的各項(xiàng)配置效果具體可參考該文章：css的backdrop-filter
未來(lái)有時(shí)間再好好研究下這個(gè)屬性并將經(jīng)驗(yàn)輸出成文章分享給大家~

THX！