echarts引入自定义字体不起作用问题记录

1、问题描述

初始化界面字体不作用，当界面更新后字体样式正常显示

2、原因描述

这通常是由于字体文件加载延迟导致的。ECharts 在初始化时可能还没有加载完字体文件，因此无法正确应用字体样式

3、解决方案

<template><div class="map_layout" ref="chartRef"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, watch, onUnmounted, onBeforeMount } from 'vue'
import mapData from '@/utils/mapData.json'
import { fontSizeRatio } from '@/utils'const chartRef = ref(null)
let chart = nullonBeforeMount(() => {echarts.registerMap('聊城', mapData)let renderData = mapData.features.map((item) => {return {name: item.properties.name}})let options = {geo: [{map: '聊城',aspectScale: 1,zoom: 0.65,layoutCenter: ['50%', '50%'],layoutSize: '140%',show: true,roam: false,label: {emphasis: {show: false}},itemStyle: {normal: {borderColor: 'white',borderWidth: 1,shadowColor: '#8cd3ef',shadowOffsetY: 10,shadowBlur: 30,areaColor: 'rgb(59, 168, 226)'}}},// 重影{type: 'map',map: '聊城',zlevel: -1,aspectScale: 1,zoom: 0.65,layoutCenter: ['50%', '51%'],layoutSize: '140%',roam: false,silent: true,itemStyle: {normal: {borderWidth: 1,borderColor: 'white',shadowColor: 'rgb(0, 126, 208)',shadowOffsetY: 5,shadowBlur: 15,areaColor: 'rgb(0, 126, 208)'}}}],series: [{name: '聊城市数据',type: 'map',map: '聊城', // 自定义扩展图表类型aspectScale: 1,zoom: 0.65, // 缩放showLegendSymbol: true,label: {normal: {show: true,textStyle: {color: '#286ADC',fontSize: '0.24rem',letterSpacing: '0.03rem',fontFamily: 'YouSheBiaoTiHei',textBorderColor: 'white', // 文本边框textBorderWidth: fontSizeRatio(4) // 文字边框大小}},emphasis: {show: true,color: '#286ADC',fontSize: '0.24rem',letterSpacing: '0.02rem',fontFamily: 'YouSheBiaoTiHei',textBorderColor: 'white',textBorderWidth: fontSizeRatio(4)}},itemStyle: {normal: {areaColor: {type: 'linear-gradient',x: 0,y: 0,x2: 0,y2: 1000,colorStops: [{offset: 0,color: 'rgba(78, 201, 242)' // 0% 处的颜色},{offset: 0.5,color: 'rgba(27, 115, 199, 1)' // 50% 处的颜色},{offset: 1,color: 'rgba(27, 115, 199, 1)' // 100% 处的颜色}],global: true // 缺省为 false},borderColor: '#fff',borderWidth: fontSizeRatio(2)},emphasis: {show: false,areaColor: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1, // 渐变方向从上到下colorStops: [// 颜色停靠点{ offset: 0, color: '#E86632' }, // 开始颜色{ offset: 0.5, color: '#F6CB55' },{ offset: 1, color: '#E86632' } // 结束颜色],globalCoord: true // 是否为全局坐标}}},layoutCenter: ['50%', '50%'],layoutSize: '140%',markPoint: {symbol: 'none'},data: renderData}]}setTimeout(() => {chart = echarts.init(chartRef.value)options && chart.setOption(options)window.addEventListener('resize', resizeHandler)document.fonts.ready.then(() => {resizeHandler()})}, 0)
})function resizeHandler() {chart &&chart.resize({animation: {duration: 300,easing: 'quadraticIn'}})
}onUnmounted(() => {chart && chart.dispose()window.removeEventListener('resize', resizeHandler)
})watch(chartRef, (newContainer, oldContainer) => {if (newContainer && newContainer !== oldContainer) {resizeHandler()}
})
</script><style scoped lang="less">
@import '@/assets/styles/fonts.css';.map_layout {margin-top: -6%;margin-left: 8%;height: 100%;
}
</style>

// 确保字体加载完成后重新渲染图表
document.fonts.ready.then(() => {resizeHandler()
})

4、效果图