前端vue2修改echarts字体为思源黑体-避免侵权-可以更换为任意字体统一管理

1.下载字体

npm install @fontsource/noto-sans-sc
不知道为什么我从github上面下载的不好使,所以就用了npm的

2.引用字体

import '@fontsource/noto-sans-sc';
在入口文件-main.js中引用

3.设置echats模板样式

import * as echarts from 'echarts'; // 在import的后面,echarts的前面加一个 * as
Vue.prototype.$echarts = echarts;
echarts.registerTheme('noto-font-theme', {textStyle: {fontFamily: 'Noto Sans SC, sans-serif',},title: {textStyle: {fontFamily: 'Noto Sans SC, sans-serif',},subtextStyle: {fontFamily: 'Noto Sans SC, sans-serif',},},legend: {textStyle: {fontFamily: 'Noto Sans SC, sans-serif',},},toolbox: {textStyle: {fontFamily: 'Noto Sans SC, sans-serif',},},tooltip: {textStyle: {fontFamily: 'Noto Sans SC, sans-serif',},},xAxis: {axisLabel: {fontFamily: 'Noto Sans SC, sans-serif',},},yAxis: {axisLabel: {fontFamily: 'Noto Sans SC, sans-serif',},},
});

4.在代码中使用模板

给echarts设置模板

this.pieCharts = this.$echarts.init(chartDom, 'noto-font-theme');

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

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

相关文章

51c自动驾驶~合集37

我自己的原文哦~ https://blog.51cto.com/whaosoft/13878933 #DETR->DETR3D->Sparse4D 走向长时序稀疏3D目标检测 一、DETR 图1 DETR架构 DETR是第一篇将Transformer应用到目标检测方向的算法。DETR是一个经典的Encoder-Decoder结构的算法,它的骨干网…

【MongoDB篇】MongoDB的集合操作!

目录 引言第一节:集合的“诞生”——自动出现还是手动打造?🤔第二节:集合的“查阅”——看看这个数据库里有哪些柜子?📂👀第三节:集合的“重命名”——给文件柜换个名字!…

Goland终端PowerShell命令失效

Goland终端Terminal的PowerShell不能使用,明明windows上升级了PowerShell 7设置了配置文件,但是只能在windows终端下使用,goland终端下直接失效报错,安装升级PowerShell请看Windows11终端升级PowerShell7 - HashFlag - 博客园 问…

简单分析自动驾驶发展现状与挑战

一、技术进展与市场渗透 技术分级与渗透率 当前量产乘用车的自动驾驶等级以L2为主(渗透率约51%),L3级处于初步落地阶段(渗透率约20%),而L4级仍处于测试和示范运营阶段(渗透率约11%)2…

【C++类和数据抽象】消息处理示例(1):从设计模式到实战应用

目录 一、数据抽象概述 二、消息处理的核心概念 2.1 什么是消息处理? 2.2 消息处理的核心目标 三、基于设计模式的消息处理实现 3.1 观察者模式(Observer Pattern) 3.2 命令模式(Command Pattern) 四、实战场景…

【统计方法】交叉验证:Resampling, nested 交叉验证等策略 【含R语言】

Resampling (重采样方法) 重采样方法是从训练数据中反复抽取样本,并在每个(重新)样本上重新调整模型,以获得关于拟合模型的附加信息的技术。 两种主要的重采样方法 Cross-Validation (CV) 交叉验证 : 用于估计测试误…

常见的 CSS 知识点整理

1. 盒模型(Box Model)是什么?标准盒模型和 IE 盒模型的区别? 答案: CSS 盒模型将元素视为一个盒子,由内容(content)、内边距(padding)、边框(bor…

Educational Codeforces Round 178 div2(题解ABCDE)

A. Three Decks #1.由于最后三个数会相等&#xff0c;提前算出来和&#xff0c;%3判断&#xff0c;再判前两个数是否大于 #include<iostream> #include<vector> #include<stdio.h> #include<map> #include<string> #include<algorithm> #…

如何创建一个导入模板?全流程图文解析

先去找到系统内可以上传东西的按钮 把你的模板上传上去,找到对应的fileName 图里的文字写错了,是复制粘贴"filePath"到URL才能下载

通信原理第七版与第六版区别附pdf

介绍 我用夸克网盘分享了「通信原理 第7版》樊昌信」&#xff0c;链接&#xff1a;https://pan.quark.cn/s/be7c5af4cdce 《通信原理&#xff08;第7版&#xff09;》是在第6版的基础上&#xff0c;为了适应当前通信技术发展和教学需求&#xff0c;并吸取了数十所院校教师的反…

Mysql唯一性约束

唯一性约束&#xff08;Unique Constraint&#xff09;是数据库设计中用于保证表中某一列或多列组合的值具有唯一性的一种规则。它可以防止在指定列中插入重复的数据&#xff0c;有助于维护数据的完整性和准确性。下面从几个方面为你详细解释 作用 确保数据准确性&#xff1a…

测试基础笔记第十六天

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、UI自动化介绍1.认识UI自动化测试2.实施UI自动化测试前置条件3.UI自动化测试执行时机4.UI自动化测试核心作用和劣势 二、认识Web自动化测试工具-Selenium021.Sel…

PaddleX的安装

参考&#xff1a;安装PaddlePaddle - PaddleX 文档 1、安装PaddlePaddle 查看 docker 版本 docker --version 若您通过 Docker 安装&#xff0c;请参考下述命令&#xff0c;使用飞桨框架官方 Docker 镜像&#xff0c;创建一个名为 paddlex 的容器&#xff0c;并将当前工作目…

长效住宅IP是什么?如何获取长效住宅IP?

在当今的互联网世界里&#xff0c;IP地址作为连接用户与网站之间的桥梁&#xff0c;其重要性不言而喻。对于跨境电商、社交媒体运营以及数据采集等领域的专业人士而言&#xff0c;普通的IP地址已无法满足日益复杂的需求。他们更需要一种稳定、安全且持久的长效住宅IP来完成各类…

02 业务流程架构

业务流程架构提供了自上而下的组织鸟瞰图&#xff0c;是业务流程的全景图。根据所采用的方法不同&#xff0c;有时被称为流程全景图或高层级流程图&#xff0c;提供了业务运营中所有业务流程的整体视图。 这样有助于理解企业内部各个业务流程之间的相互关系以及它们如何共同工…

jenkins slave节点打包报错Failed to create a temp file on

jenkins slave节点打包报错 一、报错信息 FATAL: Unable to produce a script file Also: hudson.remoting.Channel$CallSiteStackTrace: Remote call to slave-83at hudson.remoting.Channel.attachCallSiteStackTrace(Channel.java:1784)at hudson.remoting.UserRequest$…

什么是 Swagger 以及如何在 Spring Boot 中实现 Swagger:配置与实践指南

在现代 RESTful API 开发中&#xff0c;Swagger 是一种广泛使用的工具&#xff0c;用于生成、描述和可视化 API 文档。它极大地简化了 API 的开发、测试和维护过程。结合 Spring Boot&#xff0c;Swagger 可以快速集成到项目中&#xff0c;生成交互式 API 文档&#xff0c;方便…

Xilinx FPGA支持的FLASH型号汇总

以博主这些年的FPGA开发使用经验来看&#xff0c;FPGA开发的主流还是以Xilinx FPGA为主&#xff0c;贸易战关税战打了这么多年&#xff0c;我们做研发的也不可避免的要涉及一些国产替代的工作&#xff1b;这里把Xilinx FPGA官方支持的各类&#xff08;国产和非国产&#xff09;…

第3讲:ggplot2完美入门与美化细节打磨——从基础绘制到专业级润色

目录 1. 为什么选择ggplot2? 2. 快速了解ggplot2绘图核心逻辑 3. 基础绘图示范:柱状图、折线图、散点图 (1)简单柱状图 (2)折线图示范 (3)高级散点图 + 拟合线 4. 精细美化:细节打磨决定专业感 5. 推荐的美化小插件(可选进阶) 6. 小练习:快速上手一幅美化…

Vue3 上传后的文件智能预览(实战体会)

目录 前言1. Demo12. Demo2 前言 &#x1f91f; 找工作&#xff0c;来万码优才&#xff1a;&#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 爬虫神器&#xff0c;无代码爬取&#xff0c;就来&#xff1a;bright.cn 此处的基本知识涉及较少&#xff0c;主要以Demo的形式供大…