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