比較常見的問題就是我們顯示的提示框的樣式或者是提示框的內容要多加一些東西，這個時候很多人都很頭疼，

那麼我來給大家一種比較好理解的法子。

先來說說需要改成需要的內容

第一種：

tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} %'   //通過formatter 這些來設定自己要新增的單位如：%
},

這種方法有時候不是特別理想，因為這種方法有時候太亂了，有時候又沒有自己想要的內容，這個時候教大家第二種方法

第二種：

tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(12, 204, 104, 0.92)',
    borderColor: '#FFFFCC'
    formatter: function(params, ticket, callback) {
        //根據業務自己拓展要顯示的內容，可以列印一下引數選擇自己需要的內容
        var res = "";
        var name = params.name;
        var value = params.value[params.seriesIndex + 1];
        //然後在這裡設定自己需要新增的一些其他的內容
        res = "<span style='color:#fff;'>" + name + "</span><br/>資料：" + value;  
        return res;  //必須要有返回值
    }
},
 

第二種基本上可以解決很大一部分的問題了。

那麼接下來說說，如何設定提示框的樣式呢？

有時候我們一個echarts圖裡面有很多的資料，提示框會變的很長甚至有時候一部分會看不見這樣我們覺得不行，客戶體驗也不好，所以就需要來改變的提示框的樣式了。但是問題來了，echarts裡面提示框沒有設定樣式這一說，我百度了一下找到了答案，因為提示框是一個div不是在canvas畫布上畫出來的，所以把這個放到下面講因為一部分跟上面也有關係。

來看案例：

<style>

/*給雷達圖提示框設定樣式*/
.f_cpu div:nth-child(2){
    width: 240px;
}
.f_clock{
    width: 70px;
    display: block;
    float: left;
    padding: 0 5px;
}
 

</style>

<div class="f_cpu fl" id="f_warning"></div>

<script>

tooltip: {
    show: true,
    trigger: "item",
    formatter: function (params) {
        var res="";
        for(var i=0; i<24; i++){
            res+="<span class='f_clock'>"+i+"點："+params.data[i]+"</span>"; //設定提示框裡面想要的樣式
        }
        return res;
    }
},
 

</script>