可視區尺寸改變的時候，重繪Echarts

當頁面縮放，或者盒子尺寸改變的時候，我們會發現 Echart 的位置和大小就不再合適，這里提供兩個解決辦法：

　　辦法1：

　　　　監聽 window 的 resize 事件

componentDidMount() {
  this.chartDom = document.getElementById(this.props.domId);
  this.drawChart()
  
  //屏幕縮放的時候，重繪Echart
  window.addEventListener("resize", () => {
  this.myChart.resize();
  })
}

　　辦法2：

　　　　需要把 HTML.style.fontSize 存到 redux 中，然后監測 這個值是否改變，具體代碼如下：

　　　　1：存 HTML.style.fontSize

componentDidMount() {
  this.rem()
}

rem = () => {  //改變根節點的
  (() => {
    let that = this
    function computed() {
      let HTML = document.documentElement;
      let winW = HTML.clientWidth;
      HTML.style.fontSize = (winW / 1366) * 16 + 'px';
      //把改變后的根節點大小傳出去，也可以存在 redux 中，比 Echarts 就需要判斷使用
      that.props.changeFontSize(HTML.style.fontSize)
    }
    computed();
    window.addEventListener('resize', computed, false);
  })();
}

　　　　2：監測 HTML.style.fontSize 是否改變

componentWillReceiveProps(nextProps) {
  //判斷redux中的，關於尺寸大小的數據是否改變，進行重繪
  if (nextProps.htmlFontSize !== this.props.htmlFontSize) {
    this.myChart || this.myChart.resize(true)
  }
}

辦法1 和 辦法2 對比：

　　第一種只能保證 Echarts 的整體大小合適，如果 Echarts 中的每一個指標值也進行大小的改變，此時需要使用第二種辦法。

　　比如：

tooltip: {
  backgroundColor: "#FFF",
  trigger: "axis",
  textStyle: {
    color: "#666",
    fontSize: 12 * this.props.htmlFontSize / 16,
    lineHeight: 5,
  },

 　　也可以一起使用