zoukankan      html  css  js  c++  java
  • 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',
                     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',
                     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',
                     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',
                    4
                }
            },
            symbolSize:12
        },
    
        ]
    };
    
    this.myChart.setOption(option, true);
  • 相关阅读:
    Windows 设置自启动计划任务(非登录启动)
    C# 计算代码执行时间
    使用RabbitMQ做数据接收和处理时,自动关闭
    Winform 连接Web Service 记录
    【转】DataTable 中数据筛选
    更改数据库管理员sa账户密码
    数据库显示可疑的修复方法
    SQL SERVER 2008 删除某个数据库的所有连接进程
    数据库自动备份还原成新库脚本
    关于BindingSource 组件的一些用法
  • 原文地址:https://www.cnblogs.com/mengff/p/8980814.html
Copyright © 2011-2022 走看看