鍍金池/ 問答/HTML/ echarts在tab切換時(shí)容器寬度設(shè)置為100%，只展示100px?

echarts在tab切換時(shí)容器寬度設(shè)置為100%，只展示100px?

echarts在tab切換時(shí)容器寬度設(shè)置為100%, 但是不管怎么設(shè)置, 寬度都只有100px, 在網(wǎng)上說是因?yàn)閠ab欄切換隱藏導(dǎo)致, 試了上面很多方法, 都不能正常展示, 后面在代碼中加了window.onresize = myChart.resize;只能當(dāng)瀏覽器窗口改變大小之后才能正常顯示, 但是如果不改變窗口大小還是之后100px, 大家之前有碰到過這種情況是怎么解決的嗎?
clipboard.png
html

clipboard.png
js

/* 統(tǒng)計(jì)柱狀圖 */
var myChart = echarts.init(document.getElementById("main"));
window.onresize = myChart.resize;

// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var statistics = {
  title: {
    text: "面積",
    textStyle: {
      fontWeight: "normal",
      color: "#fff", // 標(biāo)題顏色
      fontSize: 14
    },
    left: "center"
  },
  tooltip: {
    // 鼠標(biāo)移動(dòng)柱狀圖是提示文字
    show: true
  },
  legend: {
    // data: ['面積'],
    textStyle: {
      fontSize: 12
    }
  },
  // 橫坐標(biāo)
  xAxis: {
    data: ["灌木", "森林", "森林", "樹木", "小樹", "大樹", "紅樹"],
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff"
      }
    },
    axisLine: {
      lineStyle: {
        color: "#094060"
      }
    }
  },
  // 縱坐標(biāo)
  yAxis: {
    // 設(shè)置坐標(biāo)軸字體顏色
    axisLine: {
      lineStyle: {
        color: "#094060"
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff"
      }
    },
    splitLine: {
      lineStyle: {
        color: ["#07405c"]
      }
    }
  },
  //配置樣式
  itemStyle: {
    color: "#06ae7c",
    //鼠標(biāo)懸停時(shí)：
    emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: "rgba(0, 0, 0, 0.5)"
    }
  },
  series: [
    {
      type: "bar",
      barWidth: 48, // 設(shè)置柱的寬度
      data: [38, 23, 35, 12, 26, 8, 36]
    }
  ]
};

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(statistics);
回答
編輯回答
尐飯團(tuán)
var resize = {
  width: 1346,
  height: 400
};
myChart.resize(resize);

官方文檔: http://echarts.baidu.com/api.html#echartsInstance.resize
2017年6月10日 01:42