echarts legend 自适应屏幕

Question

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

Answer 1

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()