echarts默認的tooltip是自帶圖例顏色的,如下圖:
非自定義
可是很多時候,功能需求會要求提示框帶單位或者調整樣式。這個時候我們就需要用tooltip的formatter來自定義提示框內容。
點我跳轉echarts tooltip自定義
可一旦用到formatter,圖例顏色就會消失。如下圖
截圖
如何設置呢?
上代碼:
formatter(params) {
let val0 = params[0]["value"];
let val1 = params[1]["value"];
let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
let data0 = `${circle}rgba(82, 248, 215, 1)"></span> ${
params[0]["seriesName"]
}: ${val0}萬元`;
let data1 = `${circle}rgba(255, 71, 71, 1)"></span> ${
params[1]["seriesName"]
}: ${val1}萬元`;
return `${params[0].axisValueLabel}<br/>${data0}<br/>${data1}`;
}
結果展示:
結果