zoukankan      html  css  js  c++  java
  • vue框架下,echarts图表外部容器宽度设置为百分比时内容超出容器以及echarts图表自适应的实现方案

    在vue.js框架下,创建echarts图表,当图表的外部容器的宽度设置为百分比时,出现图表内容宽度超出其外部容器的情况,几番调试,得解决方案如下:

    (备注说明:问题产生的具体原因尚不清晰,后面若知晓了再补充,但是初期解决问题阶段一定不要钻牛角,不是一开始就能或者可以知道真理的)

    • 在创建了echart对象之后,就调用一次echart的resize方法,同时,获取图表数据的方法应该是异步的,如果是初期调试模拟也要用setTimeout延迟一下,0秒即OK了。
    methods: {
        ...mapActions("chartonetwo", ["getData"]),
        initChart() {
          let oChart = echarts.init(document.getElementById("chartone"));
          oChart.resize();//关键步骤
          ......(其他代码省略)
        }
    }
    

    echart图表随窗口大小变化的自适应的实现方法

    • 在渲染图表即setOption之后,添加窗口的resize方法
    oChart.setOption(option);
    window.addEventListener("resize", function() {
        oChart.resize();
    });
    
    • 特别注意:当项目是引用jquery框架时,此处的事件添加也一定要用原生js的方式,否则,当一个页面中有多个echart图表时,会造成事件的覆盖,即只有一个图表的resize方法生效。
  • 相关阅读:
    elementUI form select验证问题
    Echart--基本属性
    Echart--饼状图
    Echart--折线图
    Echart--多个柱形图
    Echart--单个柱形图
    Echart--圆型图
    构析函数和构造函数
    心情
    图片
  • 原文地址:https://www.cnblogs.com/chaoyueqi/p/9926503.html
Copyright © 2011-2022 走看看