关于echarts动态图表tab切换出现的问题

记笔记，免忘记！

新界面改版，设计图含有饼状图和折线图的tab切换，移动端上写饼状图和折线图什么的完全不知道要怎么动手。本人比较小白。后来求助广大历害的网络，使用了echarts.min.js 这个来写饼状图和折线图，果然简单有效。不过头一次用这个js还真是不太会啊..../(ㄒoㄒ)/~~   echart官网

我是把页面布局弄完最后才写饼状图和折线图。最后tab切换时发现一个问题。就是第一个tab时，图形正，切换第二第三第四tab时图形变小显示不完全被压缩。调了N久，网络上也有很多的关于这类问题的文章，也按照文章上面的写法改了自己写的，But呢还是不行。可以结构不一样，所以还是不可以。网上的思路呢【页面里的图表在刷新页面时已全部加载，但是tab被隐藏没有固定宽度所以会出现这个问题】，也是懂的，奈何不会啊！文档也有提示，但是表示没看懂文档  有时候图表会放在多个标签页里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败，因此在切换到该标签页时需要手动调用 resize 方法获取正确的高宽并且刷新画布，或者在 opts 中显示指定图表高宽。

当时参考部分其它人使用可以的文章如下：

1、tab切换echarts无法正常显示       2、解决Bootstrap 标签页（Tab）插件切换echarts不显示问题     3、问题  4、tab中图表不显示或显示不全问题

尝试解决问题方法一：

使用js动态给图形的div添加宽高如下 添加后图形只是简单粗暴的被拉伸了，所以添加宽高不行，可能是我也错了。

$(function () {
    var width = $(window).width(), height = $(window).height, _width = (width/100)*10;
    console.log(width);
    $(".pie-main div").width(width-_width);
    $(".pie-main div > canvas").width(width-_width);

});

尝试解决问题方法二：

变化浏览器窗口的时候图形会显示正常，但是tab切换的时候还是显示不正常。

setTimeout(function (){
    window.onresize = function () {
        myChart.resize();
        myChart2.resize();
        myChart3.resize();
        myChart4.resize();
    }
},200);

尝试解决问题方法三：可行已解决

同事的同事提示要resize，选项卡不用display:none,改用visibility:hidden 的方式。

将选项卡的样式修改后tab切换的时候第二个图形被挤到最最底下了，这时候的图表是显示正常的

/*调试*/
.chart-bd .weui-tab__bd-item{
    visibility: hidden;
    display: inline;
    height: 100%;
    overflow: auto;
}
.chart-bd .weui-tab__bd-item.weui-tab__bd-item--active{
    visibility: visible;
    display: inline;
}
.weui-tab__bd .weui-tab__bd-item.weui-tab__bd-item--active{
    visibility: visible;
    display: inline;
}

// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('main'));
var myChart2 = echarts.init(document.getElementById('main2'));
var myChart3 = echarts.init(document.getElementById('main3'));
var myChart4 = echarts.init(document.getElementById('main4'));

// 指定图表的配置项和数据
var option1 = {}
var option2 = {}
var option3 = {}
var option4 = {}

// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option1);
myChart2.setOption(option2);
myChart3.setOption(option);
myChart4.setOption(option3);


//配置tab点击事件  因为修改了样式之后（只是div内容不可见不是隐藏）第二个图形被第一个图形挤下去，第三个图形被第一第二挤下去依次类推
$(".weui-navbar__item").click(function (e) {
        var href = $(this).attr("href"), i = $(this).attr("data-sid");
        console.log(href,i,e);
        if(href == "#tab1"){
            $("#tab1 div").show();
            $("#tab3 div").hide();
            $("#tab2 div").hide();
            $("#tab4 div").hide();
            myChart.resize();
            return;
        }
        if(href == "#tab2"){
            ...
            myChart2.resize();
            return;
        }
        if(href == "#tab3"){
            ...
            myChart3.resize();
            return;
        }
        if(href == "#tab4"){
            ...
            myChart4.resize();
            return;
        }
    });

尝试解决问题方法四：同事的同事给改的，感觉比我的这个简单，666的不行

 

整理了一下，demo下载：https://download.csdn.net/download/zilvzsy/11811414