echarts 饼图的自适应

Question

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

Answer 1

和上个问题差不多，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()