echarts使用canvas画图，在移动端使用rem时候，若viewport的scale被缩放，则字体会发生模糊，本人采用的解决方法是在不同的dpr下使用不同的字体大小，具体代码如下：
获取字体大小，实测在主流手机上效果尚可：
function fGetChartFontSize(){
const dpr = window.devicePixelRatio;
let fontSize = 14;
if(dpr == 2){
fontSize = 19;
}
else if(dpr == 3){
fontSize = 30;
}
else if(dpr > 3){
fontSize = 30;
}
return fontSize;
}
设置echarts的字体大小
const size = fGetChartFontSize();
const option = {
tooltip: {
show: true,
trigger: 'axis',
formatter: "{c}%",
backgroundColor: '#f46200',
axisPointer: {
lineStyle: {
show: true,
color: '#f46200',
width: 1,
}
},
textStyle:{
fontSize:size //此处设置提示文字大小
},
padding:[5,10]
},
grid: {
top: '10%',
left: '0%',
right: '5%',
bottom: '0%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: this.dateList,
axisLabel: {
show: true,
textStyle: {
color: '#d2d2d2',
fontSize: size //此处设置X轴文字大小
}
},
axisLine: {
lineStyle: {
color: '#e5e5e5',
width: 1,
}
},
splitLine: {
show: true,
lineStyle: {
color: '#e5e5e5'
}
}
}],
yAxis: [{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#d2d2d2',
fontSize: size, //此处设置Y轴文字大小
baseline:'bottom'
}
},
max: 4.9,
min: 3.7,
interval: 0.2,
axisLine: {
lineStyle: {
color: '#e5e5e5',
width: 1,
}
},
splitLine: {
lineStyle: {
color: '#e5e5e5'
}
}
}],
series: [{
name: '',
type: 'line',
stack: '总量',
areaStyle: {
normal: {}
},
data: this.rateList,
itemStyle: {
normal: {
borderColor: '#f46200',
}
},
areaStyle: {
normal: {
color: '#ffe1c2',
}
},
lineStyle: {
normal: {
color: '#ff8200',
width:4
}
},
symbolSize:12
}, ]
}; this.myChart.setOption(option, true);