html

js
 var myChart = echarts.init(document.getElementById("main"));
 window.onresize = myChart.resize;

```
var statistics = {
  title: {
    text: "面积",
    textStyle: {
      fontWeight: "normal",
      color: "#fff", 
      fontSize: 14
    },
    left: "center"
  },
  tooltip: {
    // 鼠标移动柱状图是提示文字
    show: true
  },
  legend: {
    // data: ['面积'],
    textStyle: {
      fontSize: 12
    }
  },

  xAxis: {
    data: ["灌木", "森林", "森林", "树木", "小树", "大树", "红树"],
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff"
      }
    },
    axisLine: {
      lineStyle: {
        color: "#094060"
      }
    }
  },

  yAxis: {

    axisLine: {
      lineStyle: {
        color: "#094060"
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff"
      }
    },
    splitLine: {
      lineStyle: {
        color: ["#07405c"]
      }
    }
  },

  itemStyle: {
    color: "#06ae7c",

    emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: "rgba(0, 0, 0, 0.5)"
    }
  },
  series: [
    {
      type: "bar",
      barWidth: 48, 
      data: [38, 23, 35, 12, 26, 8, 36]
    }
  ]
};

myChart.setOption(statistics);

```

The echarts container in the tab switch width is set to 100%, but no matter how to set the width, are only 100px, the Internet that is because the tab bar tried to hide cause, many of the above methods, are not normal display, followed by window.onresize = myChart.resize in the code; only when changing the size of the browser window to display properly, but if you do not change the size of the window or after 100px, before we have encountered this kind of situation is how to solve?