echarts 饼图的自适应

echarts 如何让饼图,随着屏幕的大小,而自适应变大变小。

img

和上个问题差不多,resize事件更新option

pie达到自适应用到window.onresize,根据页面可视宽度动态调整下series的center,radius

    var timer;
    function checkWindowWidth() {
        var cw = document.documentElement.clientWidth;//页面可视宽度
        var chartWidth = $('#myChart1').width();//3个容器一样宽度,用其中一个计算
        //调整series
        if (cw > 1024) {//大于1024以上
            option.series[0].center = ['15%', '25%'];
            option.series[0].radius = ['35%', '28%'];
        }
        else  {//720~1024
            option.series[0].center = ['50%', '30%'];
            option.series[0].radius = ['60%', '53%'];//放大半径

        }
        myChart.setOption(option);
        myChart.resize();
    }

    var myChart = echarts.init(document.getElementById('myChart'));
    window.onresize = function () {
        clearTimeout(timer);//防抖
        timer = setTimeout(checkWindowWidth, 200);
    };
    checkWindowWidth()

window.addEventListener("resize", function () {
myChart.resize(); // myChart 是实例对象
});

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632