在 echarts 的 rich 中使用 iconfont 图标库图标作为 backgroundColor.image 值的方法

实现步骤

1、引入 iconfont.js。该脚本执行时，会在 body 下插入一个 svg 标签，标签下包含了图标库中的 svg 图标 path。

<script src="your/iconfont/path/iconfont.js"></script>

或者

import 'your/iconfont/path/iconfont.js'

2、获取 svg 的 dom 节点。注意，iconfont 的 svg 是插入到 body 下的。

cosnt svgDom = document.querySelector('body > svg')

3、获取图标的描边路径，即 path 的 d 属性；以及 symbol 中的 viewBox 属性（注意：如果没有viewBox，最终可能显示的是空白图标）

const icon = 'icon-namexxx' // icon 是图标的名称，也就是iconfont中对应图标的名称
const svgViewBox = svgDom.querySelector(`#${icon}`)?.getAttribute('viewBox')
const svgPath = svgDom.querySelector(`#${item.icon} > path`)?.getAttribute('d')

4、拼接 svg 字符串，可动态设置颜色值 color

const color = '#ffffff'
const svgStr = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="${svgViewBox}" ><g><path d="${svgPath}" fill="${color}"/></g></svg>`

5、将svg字符串转换成 blob 流，并赋值给 HTMLImageElement 对象

img.src = URL.createObjectURL(new Blob([svgStr], {type: 'image/svg+xml'}))

6、使用 HTMLImageElement 对象显示图标
在这里插入图片描述

const chartOption = {// ...yAxis: {axisLabel: {rich: {styleName: {backgroundColor: { image: img }}}}}// ...
}

到这里大功告成，完成代码：

cosnt svgDom = document.querySelector('body > svg')const icon = 'icon-namexxx' // icon 是图标的名称，也就是iconfont中对应图标的名称
const svgViewBox = svgDom.querySelector(`#${icon}`)?.getAttribute('viewBox') 
const svgPath = svgDom.querySelector(`#${item.icon} > path`)?.getAttribute('d')const color = '#ffffff'
const svgStr = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="${svgViewBox}" ><g><path d="${svgPath}" fill="${color}"/></g></svg>`img = new Image()
img.src = URL.createObjectURL(new Blob([svgStr], {type: 'image/svg+xml'}))const chartOption = {// ...yAxis: {axisLabel: {rich: {styleName: {backgroundColor: { image: img }}}}}// ...
}

问题拓展

有时一个项目中，不止使用一个图标库，因此在body下不止一个svg，仍然用上面的方法可能无法获取到对应图标，因此需要将所有svg都获取下来，然后遍历。

const svgDomList = document.querySelectorAll('body > svg')
let img = null
const icon = 'icon-namexxx'
if(svgDomList && svgDomList.length > 0) {for(let i = 0; i < svgDomList.length; i++) {const svgDom = svgDomList[i]const svgSymbol = svgDom.querySelector(`#${icon}`)if(svgSymbol) {const svgViewBox = svgDom.querySelector(`#${icon}`)?.getAttribute('viewBox')const svgPath = svgDom.querySelector(`#${icon} > path`)?.getAttribute('d')const svgStr = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="${svgViewBox}" ><g><path d="${svgPath}" fill="${color}"/></g></svg>`img = new Image()img.src = URL.createObjectURL(new Blob([svgStr], {type: 'image/svg+xml'}))break;}}
}const chartOption = {// ...yAxis: {axisLabel: {rich: {styleName: {backgroundColor: { image: img }}}}}// ...
}