echarts 修改tooltip默認樣式

修改后效果如圖

 

 

            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按自己的具體數據修改，下面為當前數據。