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