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

news2024/11/24 7:39:29

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、效果图
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2238894.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Sql server 备份还原方法

备份 方法1&#xff0c;选择对应的数据库名-------》右键 任务---------》备份 默认备份类型 完整 文件后缀 .bak 方法2,选择对应的数据库名-------》右键 任务----------》生成脚本 选择要编写的数据库对象(表&#xff0c;视图&#xff0c;存储过程等) 选择对应的 服…

QT鼠标事件

QT鼠标事件 1.概述 这篇文章介绍如何使用事件和获取事件的信号 2.创建项目 创建一个widget类型项目&#xff0c;在widget.ui文件中添加一个label控件 然后在项目名称上右键选择Add new... 添加文件&#xff0c;选择 C Class 自定义类名Mylabel&#xff0c;选择基类Base …

【Android】webview常用方法和使用

文章目录 前言一、常见用法二、基础属性webView的常用方法WebViewClient的常用方法WebChromeClient的常用方法WebSettings的相关方法 三、加载流程和事件回调四、webview和JS之间的互相调用总结 五、参考链接 前言 最近项目又用到了webview&#xff0c;在回顾复习一次webview相…

malloc calloc和realloc区别和联系

malloc malloc是一个⼀个动态内存开辟的函数&#xff1a; 它的函数原型是void* malloc (size_t size);这个函数向内存申请⼀块连续可⽤的空间&#xff0c;并返回指向这块空间的指针。 1.如果开辟成功&#xff0c;则返回⼀个指向开辟好空间的指针。 2.如果如果开辟失败&#xf…

Android studio中关于printf和print和println的区别

print:为一般输出&#xff0c;同样不能保留精度格式转化&#xff0c;也不能换行输出&#xff0c;输出需要加上换行符printf:常用于格式转换&#xff0c;但需要注意不是换行输出&#xff0c;只用于精度转换&#xff0c;跟C语言的printf一样的&#xff0c;输出需要加上换行符prin…

计算机网络常见面试题(一):TCP/IP五层模型、TCP三次握手、四次挥手,TCP传输可靠性保障、ARQ协议

文章目录 一、TCP/IP五层模型&#xff08;重要&#xff09;二、应用层常见的协议三、TCP与UDP3.1 TCP、UDP的区别&#xff08;重要&#xff09;3.2 运行于TCP、UDP上的协议3.3 TCP的三次握手、四次挥手3.3.1 TCP的三次握手3.3.2 TCP的四次挥手3.3.3 随机生成序列号的原因 四、T…

分布式——BASE理论

简单来说&#xff1a; BASE&#xff08;Basically Available、Soft state、Eventual consistency&#xff09;是基于CAP理论逐步演化而来的&#xff0c;核心思想是即便不能达到强一致性&#xff08;Strong consistency&#xff09;&#xff0c;也可以根据应用特点采用适当的方…

【RabbitMQ】07-业务幂等处理

1. 方式一 序列化设置唯一Id。 Beanpublic MessageConverter messageConverter() {Jackson2JsonMessageConverter jjmc new Jackson2JsonMessageConverter();jjmc.setCreateMessageIds(true);return jjmc;}RabbitListener(bindings QueueBinding(value Queue(name "d…

【多线程奇妙屋】你听说过设计模式吗?软件开发中可全局访问一个对象的设计模式——单例模式,工作常用, 建议收藏 ! ! !

本篇会加入个人的所谓鱼式疯言 ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…

android studio 配置过程

Android studio版本&#xff1a;Android Studio Ladybug | 2024.2.1 windows 10 x64 关键问题解决方法&#xff1a; 1.设置代理&#xff1a; 退出首次配置&#xff0c;进入ide&#xff08;必要时新建工程&#xff09;然后&#xff1a; 然后重启ide 等待下载完成。 代理地…

java ssm 个人学习管理系统 学习安排 学生在线学习管理 源码 jsp

一、项目简介 本项目是一套基于SSM的个人学习管理系统&#xff0c;主要针对计算机相关专业的和需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本、软件工具等。 项目都经过严格调试&#xff0c;确保可以运行&#xff01; 二、技术实现 ​后端技术&#x…

【harbor】离线安装2.9.0-arm64架构服务制作和升级部署

harbor官网地址&#xff1a;Harbor 参考文档可以看这里&#xff1a;部署 harbor 2.10.1 arm64 - 简书。 前提环境准备&#xff1a; 安装docker 和 docker-compose 先拉arm64架构的harbor相关镜像 docker pull --platformlinux/arm64 ghcr.io/octohelm/harbor/harbor-regist…

ssm+vue708基于BS的库存管理软件设计与实现

博主介绍&#xff1a;专注于Java&#xff08;springboot ssm 等开发框架&#xff09; vue .net php phython node.js uniapp 微信小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不…

速通LoRA:《LoRA: Low-Rank Adaptation of Large Language Models》全文解读

文章目录 总览AbstractIntroductionProblem StatementAren’t Existing Solutions Good Enough?Our MethodLow-Rank-Parametrized Update MatricesApplying LoRA to Transformer 何为高斯随机初始化Empirical ExperimentsBaselinesRoBERTa base/largeDeBERTa XXLGPT-2 medium/…

智慧园区解决方案:科技赋能,打造未来管理新典范

智慧园区作为城市发展的重要组成部分&#xff0c;正以前所未有的速度蓬勃发展。随着5G、云计算、大数据、物联网&#xff08;IoT&#xff09;、BIM&#xff08;建筑信息模型&#xff09;、人工智能&#xff08;AI&#xff09;及区块链等前沿技术的日益成熟与融合应用&#xff0…

如何优化Elasticsearch的查询性能?

优化Elasticsearch查询性能可以从以下几个方面进行&#xff1a; 合理设计索引和分片&#xff1a; 确保设置合理的分片和副本数&#xff0c;考虑数据量、节点数和集群大小。根据数据量和节点数量调整分片数量&#xff0c;避免使用过多分片&#xff0c;因为每个分片都需要额外的…

前端 JS面向对象 原型 prototype

目录 一、问题引出 二、prototype原型对象 三、小结 四、constructor 五、__proto__对象原型 六、原型链 一、问题引出 由于JS的构造函数存在内存浪费问题&#xff1a; function Star(name,age){this.namenamethis.ageagethis.singfunction () {console.log("唱歌&…

【MATLAB代码】二维平面上的TDOA,使用加权最小二乘法,不限制锚点数量,代码可复制粘贴

本文所述的MATLAB代码实现了一个基于两步加权最小二乘法的二维目标定位算法,利用多个锚点(基站)和时间差到达(TDOA)数据来估计未知目标的位置。 订阅专栏后可以看到完整代码,复制到MATLAB空脚本上面即可直接运行。若需要单独下载,可通过下面的链接:https://download.cs…

推荐一款完全开源的多端仓库管理系统

简介 模块 安装 UI展示 开源地址 今天给大家介绍一款完全开源的仓库管理系统&#xff0c;本系统采用Python语言开发。 简介 该库存管理系统是目前福特亚太区售后物流仓储供应链流程。离开福特后&#xff0c;开始了这个项目。为了帮助一些有需要的人。OneAPP 理念。支持扫…

第七部分:2. STM32之ADC实验--AD多通道(AD采集三路传感器模块实验:光敏传感器、热敏传感器、反射式传感器附赠温湿度传感器教程)

这个多通道采用非扫描模式--单次转换模式 1.代码配置链路图 2. ADC的输入通道 3.ADC的非扫描模式的转换模式&#xff08;单次和连续&#xff09; 4.ADC的扫描模式的转换模式&#xff08;单次和连续&#xff09; 5.采集校准 代码实验&#xff1a; 代码部分&#xff1a; #inclu…