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

最新推荐文章于 2024-06-12 15:24:39 发布

yhanw

最新推荐文章于 2024-06-12 15:24:39 发布

阅读量871

点赞数 14

分类专栏： Web前端 echarts 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_34966814/article/details/136543827

版权

Web前端同时被 3 个专栏收录

22 篇文章 3 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

echarts

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在JavaScript中引入Iconfont.js，获取SVG图标的描边路径和viewBox，动态设置颜色，然后将其转换为Blob流并应用到图表背景中。还扩展了处理多个SVG库场景的方法。

摘要由CSDN通过智能技术生成

实现步骤

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 }
				}
			}
		}
	}
	// ...
}