alisayyz 2022-06-19 23:07 采纳率: 66.7%
浏览 111
已结题

bootstrap下多Tab echarts切换tab不显示

问题遇到的现象和发生背景

PHP语言:bootstrap框架 多Tabs中 每个tab中都有echarts; 当浏览器窗口发生变化后,切换Tab,切换到的tab下的图表不能正常显示,canvas中的width一直是0(拖拽改变浏览器大小后,才能恢复)

问题相关代码,请勿粘贴截图
            <div>
                <ul class="nav nav-tabs" id="myTab">
                    <li class="nav-item active">
                        <a href="#Cat1" class="nav-link active" data-toggle="tab">Cat1</a>
                    </li>
                    <li><a href="#RF" class="nav-link" data-toggle="tab">RF</a></li>
                    <li><a href="#APP" class="nav-link" data-toggle="tab">APP</a></li>
                    <li><a href="#WCN" class="nav-link" data-toggle="tab">WCN</a></li>
                    <li><a href="#GU" class="nav-link" data-toggle="tab">顾总</a></li>
                </ul>
            </div>

        <!-- 选项卡内容区域-tab内容栏 -->
        <div class="tab-content container-fluid">
            <div class="tab-pane fade in active show" id="Cat1">
                <div class="container ">
                    <!-- echarts 图表区域 -->
                    <div class="myTable-container" id="Cat1-container"></div>
                </div>
            </div>

            <div class="tab-pane fade in active" id="RF">
                <div class="container">
                    <!-- echarts 图表区域 -->
                    <div class="myTable-container" id="RF-container"></div>
                </div>
            </div>
        </div>





let mEcharts = [];
//图表容器初始化
let cat1 = echarts.init(document.getElementById("Cat1_container"));
let rf = echarts.init(document.getElementById('RF_container'));


//图表数据
let option1 = {
    title: {
        text: 'CAT1 SDK PASSRATE'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['FunctionTest', 'FTTest', 'AutomationTest']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true //left、right、bottom都设置为0的时候,纵坐标标线是否显示
    },
    toolbox: {
        feature: {

            dataView: {
                show: true,
                readOnly: false,
                optionToContent: function (opt) {
                    var axisData = opt.xAxis[0].data; //x轴作为条件,y轴需改成yAxis[0].data;
                    var series = opt.series;
                    var tdHeads = '<td  style="padding:0 10px">名称</td>';
                    series.forEach(function (item) {
                        tdHeads += '<td style="padding: 0 10px">' + item.name + '</td>';
                    });
                    var table = '<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;background-color:#F8F8FF"><tbody><tr>' + tdHeads + '</tr>';
                    var tdBodys = '';
                    for (var i = 0, l = axisData.length; i < l; i++) {
                        for (var j = 0; j < series.length; j++) {
                            if (typeof (series[j].data[i]) == 'object') {
                                tdBodys += '<td>' + series[j].data[i].value + '</td>';
                            } else {
                                tdBodys += '<td>' + series[j].data[i] + '</td>';
                            }
                        }
                        table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                        tdBodys = '';
                    }
                    table += '</tbody></table>';
                    return table;
                }
            }, //展示原始数据
            magicType: {
                show: true,
                type: ['line', 'bar']
            }, //bar和线之间切换
            saveAsImage: {}, //图表保存成图片功能
        },
    },
    xAxis: {
        type: 'category',
        boundaryGap: false, //横坐标标线 与名称是否留白,不留白则对齐
        data: data_x,

        // x轴坐标文字倾斜率
        // axisLabel: {
        //     interval: 0,
        //     rotate: 60
        // }

    },
    yAxis: {
        type: 'value',
        name: 'PassRate%',
        nameLocation: 'center',
        nameGap: 40,

        // axisLabel: {
        //     formatter: '{value} %'
        // },

        min: 50,
        max: 100,

    },
    series: [{
        name: 'FunctionTest',
        type: 'line',
        // stack: 'Total', //第二条线在第一条线的基础上,数据叠加,所有不设置或者设置不同的名字
        data: data_y
    }, {
        name: 'FTTest',
        type: 'line',
        // stack: 'Total',
        data: [79, 96, 82.5, 94.6, 80.1]
    }, {
        name: 'AutomationTest',
        type: 'line',
        // stack: 'Total',
        data: [79.5, 89.3, 94.6, 87.3, 97.2]
    }]
};
let optionRF = {
    title: {
        text: 'RF PASSRATE'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['FunctionTest', 'FTTest', 'AutomationTest']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true //left、right、bottom都设置为0的时候,纵坐标标线是否显示
    },
    toolbox: {
        feature: {
            dataView: {
                show: true,
                readOnly: false,
                optionToContent: function (opt) {
                    var axisData = opt.xAxis[0].data; //x轴作为条件,y轴需改成yAxis[0].data;
                    var series = opt.series;
                    var tdHeads = '<td  style="padding:0 10px">名称</td>';
                    series.forEach(function (item) {
                        tdHeads += '<td style="padding: 0 10px">' + item.name + '</td>';
                    });
                    var table = '<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;background-color:#F8F8FF"><tbody><tr>' + tdHeads + '</tr>';
                    var tdBodys = '';
                    for (var i = 0, l = axisData.length; i < l; i++) {
                        for (var j = 0; j < series.length; j++) {
                            if (typeof (series[j].data[i]) == 'object') {
                                tdBodys += '<td>' + series[j].data[i].value + '</td>';
                            } else {
                                tdBodys += '<td>' + series[j].data[i] + '</td>';
                            }
                        }
                        table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                        tdBodys = '';
                    }
                    table += '</tbody></table>';
                    return table;
                }
            }, //展示原始数据
            magicType: {
                show: true,
                type: ['line', 'bar']
            }, //图表显示切换
            saveAsImage: {} //图表保存成图片功能
        },
        dataView: {
            // show: true,
            // readOnly: false
        },
    },
    xAxis: {
        type: 'category',
        // boundaryGap: false, //横坐标标线 与名称是否留白,不留白则对齐
        data: ['RFxxx01', 'RFxxx02', 'RFxxx03', 'RFxxx04'],


    },
    yAxis: {
        type: 'value',
        name: 'PassRate%',
        nameLocation: 'center',
        nameGap: 40,
        min: 50,
        max: 100,

    },
    series: [{
        name: 'FunctionTest',
        type: 'bar',
        barMaxWidth: 30,
        emphasis: {
            focus: 'series'
        },
        data: [55, 98.7, 88, 89.5]
    }, {
        name: 'FTTest',
        type: 'bar',
        barMaxWidth: 30,
        emphasis: {
            focus: 'series'
        },
        data: [79, 96, 82.5, 94.6]
    }, {
        name: 'AutomationTest',
        type: 'bar',
        barMaxWidth: 30,
        emphasis: {
            focus: 'series'
        },
        data: [79.5, 89.3, 94.6, 87.3]
    }]
};


//配置图表数据
cat1.setOption(option1);
rf.setOption(optionRF);


//生成图表数组
mEcharts.push(cat1);
mEcharts.push(rf);


//图表resize自适应
$(window).resize(function() {
    for (var i = 0; i < mEcharts.length; i++) {
        mEcharts[i].resize();
    }
});

//解决tab切换不显示问题 在加载窗口后重新渲染
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    console.log(e);
    for (var i = 0; i < mEcharts.length; i++) {
        console.log(e);
        mEcharts[i].resize();
    }
});
运行结果及报错内容

当浏览器窗口发生变化后,切换Tab,切换到的tab下的图表不能正常显示,canvas中的width一直是0(拖拽改变浏览器大小后,才能恢复)

我的解答思路和尝试过的方法

使用了 //解决tab切换不显示问题 在加载窗口后重新渲染,但是似乎事件不能监听到,console无日志输出

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    console.log(e);
    for (var i = 0; i < mEcharts.length; i++) {
        console.log(e);
        mEcharts[i].resize();
    }
});
我想要达到的结果

改变浏览器大小后,切换tab,图表可以正常加载出来

  • 写回答

9条回答 默认 最新

  • 歇歇 2022-06-19 23:40
    关注

    首先看看js版本问题
    然后看看是不是jquery和bootstrap两个js的引入顺序的问题


    如果解决不了,试试下面解决方法:

    1、全局定义一个echarts数组,用于存放echarts

    var myCharts = new Array();
    
    

    img

    2、页面加载时定义方法重新渲染echarts

    //data-toggle="pill还是data-toggle="tab" 根据前面所用标签页的不同来选择。我使用的是data-toggle="tab"。
    //解决tab切换不显示问题 在加载窗口后重新渲染。
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        for(var i = 0; i < myCharts.length; i++) {
            myCharts[i].resize();
        }
    });
    
    

    img


    3、将tab下的各个图表加入定义的数组中(这里是myCharts)
    myCharts.push(myChart);

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(8条)

报告相同问题?

问题事件

  • 系统已结题 6月29日
  • 已采纳回答 6月21日
  • 修改了问题 6月19日
  • 创建了问题 6月19日

悬赏问题

  • ¥100 关于注册表摄像头和麦克风的问题
  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退
  • ¥15 关于#python#的问题
  • ¥15 主机可以ping通路由器但是连不上网怎么办
  • ¥15 数据库一张以时间排好序的表中,找出多次相邻的那些行
  • ¥50 关于DynamoRIO处理多线程程序时候的问题
  • ¥15 kubeadm部署k8s出错
  • ¥15 Abaqus打不开cae文件怎么办?
  • ¥20 双系统开机引导中windows系统消失问题?
  • ¥15 小程序准备上线,软件开发公司需要提供哪些资料给甲方