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、效果图