zoukankan      html  css  js  c++  java
  • 可视区尺寸改变的时候,重绘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,
      },

       也可以一起使用

  • 相关阅读:
    identityser4 samesit 问题
    mysql 8 root密码重置
    OutSystems学习笔记。
    获取两个List中的不同元素,4种方法,逐步优化,学习使用
    java 配置在.properties文件中的常量
    java POST 传值 加签 验证
    springboot jpa 多条件查询(多表)
    java代码行数统计工具类
    Map集合遍历的4种方法
    springboot jpa 多条件查询(单表)
  • 原文地址:https://www.cnblogs.com/MrZhujl/p/11531796.html
Copyright © 2011-2022 走看看