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

最新推荐文章于 2024-04-11 17:39:41 发布

???111

最新推荐文章于 2024-04-11 17:39:41 发布

阅读量563

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/MrZhujl/p/11531796.html

版权

本文介绍了两种确保Echarts图表自适应窗口变化的方法。第一种是监听窗口的resize事件并调整图表大小；第二种则通过监测HTML字体大小的变化来实现更精细的元素调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当页面缩放，或者盒子尺寸改变的时候，我们会发现 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,
  },

转载于:https://www.cnblogs.com/MrZhujl/p/11531796.html