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

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 = null

onBeforeMount(() => {
	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、效果图