關于echarts各項內容（包括圖表面積區域）設為漸變色已在上篇文章里全部闡述： echarts折線圖與柱狀圖等繪成漸變色的方法

單獨將tooltip拉出來再寫一篇，是因為用formatter配合超文本的形式在echarts的配置項中，于自定義樣式方面很適合各類加工以應付UI和產品那邊提出的各種花里胡哨的設計

實現效果：

開發頁面過程中寫該模塊樣式時還原出的效果：

實現方法：

1、tooltip的shadow

在tooltip的shadowStyle里進行配置：

        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的文本框：

這部分沒有特供的配置屬性，直接用formatter配合超文本的形式進行樣式加工：

        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默認背景為白色，手動置為透明
          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的參數中直接拿到：

可以直接拿來用也可以自己寫，復制粘貼后記得去掉兩個斜杠\，案例中我是在原有的基礎上加了個白色邊框：

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

THX！