前军教程网

layui的选项卡使用echarts显示多图，图表宽度显示异常，选项卡第一个图显示正常，点击其他选项卡，图表异常，宽度为100px，如何解决呢？

解决的思路：主要解决宽度的问题，如果能获取宽度，我们重新设置宽度，图表就应该能正常显示了，操作如下。

主要是修改$('.layui-tab-item')宽度，如下所示：

// 修改宽度
function resizeTabsWidth() {
    var w = $('.layui-tab-content').css('width');
    $('.layui-tab-item').css('width', w).children('div').css('width', w);
}
 
// 监听改变
window.addEventListener('resize', function () {
    resizeTabsWidth();
});
 
// 散点图
function scatterChart(elem, data) {
    resizeTabsWidth();
    var chartDom = document.getElementById(elem);
    var myChart = echarts.init(chartDom);
    var option = {}; // echarts配置
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
}

完整demo的代码如下：

    
    
    
    
    
    
    



    
    

        

            
图1
            
图2
            
图3
        
        

            

                

            
            

                

            
            

                

            
        
    
    
    <script src="https://cdn.jsdelivr.net/npm/layui@2.9.21-rc/dist/layui.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
    <script>
        // 官网：https://layui.dev/
        layui.use(['element', 'jquery'],
            function () {
                var element = layui.element
                    , $ = layui.jquery;

                test(); // 测试
                // sendRequest(); // 发送请求

                function test() {
                    // 测试数据：https://echarts.apache.org/examples/zh/editor.html?c=scatter-simple
                    var tempData = [
                        [10.0, 8.04], [8.07, 6.95], [13.0, 7.58], [9.05, 8.81], [11.0, 8.33], [14.0, 7.66], [13.4, 6.81], [10.0, 6.33], [14.0, 8.96], [12.5, 6.82], [9.15, 7.2], [11.5, 7.2], [3.03, 4.23], [12.2, 7.83], [2.02, 4.47], [1.05, 3.33], [4.05, 4.96], [6.03, 7.24], [12.0, 6.26], [12.0, 8.84], [7.08, 5.82], [5.02, 5.68]
                    ];
                    scatterChart('chart-1', tempData);
                    scatterChart('chart-2', tempData);
                    scatterChart('chart-3', tempData);
                }

                function sendRequest() {
                    $.ajax({
                        url: '',
                        type: 'post',
                        dataType: 'json',
                        data: {},
                        success: function (res) {
                            scatterChart('chart-1', res.data.chart1);
                            scatterChart('chart-2', res.data.chart2);
                            scatterChart('chart-3', res.data.chart3);
                        },
                        error: function (e) {

                        }
                    });
                }

                /*element.on('tab(tabs)', function () {
                    resizeTabsWidth();
                });*/

                // 监听改变
                window.addEventListener('resize', function () {
                    resizeTabsWidth();
                });

                // 修改宽度
                function resizeTabsWidth() {
                    var w = $('.layui-tab-content').css('width');
                    $('.layui-tab-item').css('width', w).children('div').css('width', w);
                }

                // 散点图
                function scatterChart(elem, data) {
                    resizeTabsWidth();
                    var chartDom = document.getElementById(elem);
                    var myChart = echarts.init(chartDom);
                    // echarts配置
                    var option = {
                        xAxis: {},
                        yAxis: {},
                        series: [
                            {
                                symbolSize: 20,
                                data: data,
                                type: 'scatter'
                            }
                        ]
                    };
                    myChart.setOption(option);
                    window.addEventListener('resize', function () {
                        myChart.resize();
                    });
                }
            });
    </script>