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