echarts legend 自适应屏幕

echarts legend 自适应屏幕换行。 如果缩小屏幕,legend 整个换行到series的下面。

legend自适应位置的话可以添加window.onresize,根据页面可视宽度动态调整下legend的let,top值,比如下面这样,类似css3的media query自适应

    var timer;
    function checkWindowWidth() {
        var cw = document.documentElement.clientWidth;//页面可视宽度
        if (cw > 1024) {//大于1024以上
            option.legend.orient = 'vertical'
        }
        else if (cw > 720) {//720以下
            option.legend.left = '35%'
            option.legend.top = '7%'

        }
        myChart.setOption(option);
        myChart.resize();//调整绘图位置


    }

    var myChart = echarts.init(document.getElementById('myChart'));
    window.onresize = function () {
        clearTimeout(timer);//防抖
        timer = setTimeout(checkWindowWidth, 200);
    };
    checkWindowWidth()
您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632