echarts移动端字体模糊解决方法
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);