echarts 自定義tooltip顯示圖例顏色

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}`;
        }

結果展示:


結果
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容