echarts 图表在手机上显示很模糊,请问是什么原因呢?

如题,引用的最新版的echarts 插件制作的饼状图 但是手机上看起来很模糊 请问是什么原因啊?

页面有 <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,user-scalable=no">
html:

<canvas id="myChart" width="200" height="200"></canvas>

js:

    var myChart = echarts.init(document.getElementById('myChart'));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:[]
        },
        color:['#36d1bb','#fecb5e','#f59860','#119FD9','#E5D117','#FF7C41', '#FF5151'],
        series: [
            {
                name:'',
                type:'pie',
                radius: ['30%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '12',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'1'},
                    {value:310, name:'2'},
                    {value:234, name:'3'},
                    {value:135, name:'4'},
                    {value:154  , name:'5'}
                ]
            }
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);

js也都是官网的例子 有人知道吗

阅读 7.3k
3 个回答

canvas渲染的模糊一直没找到原因 !但是换个思路 :采用svg渲染 然后手机上就正常清晰度了!

选用 svg 渲染是一个方案,在移动端的内存占用也会更小。或者初始化的时候不要用 canvas,而用一个 div 作为容器,初始化在自动创建 canvas 的时候会根据高分屏优化,会缩放到两倍大小

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题