可视区尺寸改变的时候,重绘Echarts

时间:2019-09-17
本文章向大家介绍可视区尺寸改变的时候,重绘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.resetChart(true)
  }
}
办法1 和 办法2 对比:
  第一种只能保证 Echarts 的整体大小合适,如果 Echarts 中的每一个指标值也进行大小的改变,此时需要使用第二种办法。
  比如:
tooltip: {
  backgroundColor: "#FFF",
  trigger: "axis",
  textStyle: {
    color: "#666",
    fontSize: 12 * this.props.htmlFontSize / 16,
    lineHeight: 5,
  },

 

$flag 上一页 下一页