关于echart的legend的文字中如何插入图片的问题

如上图所示图例中的上下箭头均是图片

好了现在开始准备legend的属性

一首先想到的方法(暂时行不通,可以跳过):

1先把图片转换成base64的格式

2使用legend.formatter中返回<img>标签

3如下

return `{a|${paddedName}} {b|${data.value}}  <img src='${imgBase64.up}' style="width:9px;height:11px;" /> ${cleanGrowthRate} `;

但是好像返回 HTML 字符串不会被解析为实际的 HTML，而是作为纯文本显示

二使用富文本的背景图格式

1使用legend.textStyle.rich富文本如果没用过富文本自己百度一下

2定义富文本的背景图

 textStyle: {
      rich: {
        e: {
          color: "#fff",
          backgroundColor: {
            image: imgBase64.up,
          },
        },
        f: {
          color: "#fff",
          backgroundColor: {
            image: imgBase64.down,
          },
        },
      },
    },

其中的image就是转换后的base64

然后再使用legend.formatter

if (arrow === imgBase64.up) {
        return `{a|${paddedName}} {b|${data.value}%}  {e|  } {c|${cleanGrowthRate}} `;
      } else if (arrow === imgBase64.down) {
        return `{a|${paddedName}} {b|${data.value}%}  {f|  } {d|${cleanGrowthRate}} `;
      }

其他的富文本标签可以忽略重要看定义的e和f标签部分

关于echart的legend的文字中如何插入图片的问题

悦读