修改後效果如圖

            tooltip: {
                // trigger 設定觸發型別，預設資料觸發，可選值：'item' ¦ 'axis'
                trigger: "item",
                showDelay: 20, // 顯示延遲，新增顯示延遲可以避免頻繁切換，單位ms
                hideDelay: 20, // 隱藏延遲，單位ms
                backgroundColor: "rgba(1,172,253,0.7)", // 提示框背景顏色
                borderColor:'rgb(1,172,253)',
                textStyle: {
                    fontSize: 
 
14,
                    color: "#fff",
                },
                // formatter:'{b0}<br />{c}'
                formatter: function (params) {
                    //console.log("--x軸類目對應的引數陣列--", params); //顯示的提示框中的相關資料
                    var res = // 字串形式的html標籤會被echarts轉換渲染成資料，這個res主要是畫的tooltip裡的上部分的標題部分
 

                    "<div style='margin-bottom:5px;padding:0 12px;width:100%;height:24px;color:#03EDFC;;line-height:24px;'><p>" +
                    params.name +
                    " </p></div>";
                    res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">
                        <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${[
                            params.color, // 預設是小圓點，我們將其修改成有圓角的正方形，這裡用的是模板字串。並拿到對應顏色、名字、資料
                        ]};
 
"></span>
　　　　　　　　　　　　　　
                        ${params.value}
                        </div>`;
                    return res; // 經過這麼一加工，最終返回出去並渲染，最終就出現了我們所看的效果
                },
            },

程式碼中的params.name與params.value按自己的具體資料修改，下面為當前資料。