echarts出现宽度变成100px的情景及解决方案

1.tab页切换echarts图表时图表变形

var charts=new Array();
myChart.setOption(option);
charts.push(myChart);
//普遍的tab切换
	   $(window).resize(function() {
		          for(var i = 0; i < charts.length; i++) {
		              charts[i].resize();
		          }
		      });
//bootstrap的tab页面切换
	    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
	        for(var i = 0; i < charts.length; i++) {
	            charts[i].resize();
	        }
	    });

2.在el-card中显示echarts图表

var chartDom = document.getElementById("avg_bar");
      chartDom.style.width = window.innerWidth / 3 - 20 + "px";
      chartDom.style.height = "250px";
      var barChart = echarts.init(chartDom);
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "5%",
          left: "13%",
          right: "0",
          bottom: "5%",
          containLabel: true,
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["语文", "数学", "英语"],
          textStyle: {
            fontSize: 14,
          },
          y: "40px",
        },
        xAxis: {
          type: "category",
          data: [
          "21/22-2",
          "21/22-1",
          "20/21-1",
          "19/20-2",
          "18/19-2",
          "18/19-1",
          "17/18-2",
          "17/18-1",
        ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "语文",
            type: "bar",
            stack: "total",
            itemStyle: {
              normal: {
                color: "#5087EC",
              },
            },
            data: [320, 302, 301, 334, 390, 330, 320, 300],
          },
          {
            name: "数学",
            type: "bar",
            stack: "total",
            itemStyle: {
              normal: {
                color: "#68BBC4",
              },
            },
            data: [320, 302, 301, 334, 390, 330, 320, 300],
          },
          {
            name: "英语",
            type: "bar",
            stack: "total",
            itemStyle: {
              normal: {
                color: "#58A55C",
              },
            },
            data: [320, 302, 301, 334, 390, 330, 320, 300],
          },
        ],
      };
      barChart.setOption(option, true);
      window.addEventListener("resize", function () {
        chartDom.style.width = "";
        barChart.resize();
      });