可视区尺寸改变的时候，重绘Echarts，以及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,
  },

 　　也可以一起使用

 

---

保留之前的渲染数据

function fun(res) {

var piechart = echarts.init(document.getElementById('pieChart'));
option={};
piechart.setOption(option);
}

清除残留的渲染数据

如果需要清除之前残留的渲染数据，可以使用echart 对象的clear方法

function fun(res) {

var piechart = echarts.init(document.getElementById('pieChart'));
piechart.clear(); //清除残留渲染
option={};
piechart.setOption(option);
}