美文网首页
echarts 自定义tooltip显示图例颜色

echarts 自定义tooltip显示图例颜色

作者: 小小少年小阿清 | 来源:发表于2021-11-23 16:13 被阅读0次

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

    结果展示:


    结果

    相关文章

      网友评论

          本文标题:echarts 自定义tooltip显示图例颜色

          本文链接:https://www.haomeiwen.com/subject/rxbwtrtx.html