前端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');