JAVA高级面试进阶训练营视频教程

admin

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