Echarts高和宽自适应问题

Posted 2022-08-28 gxr-tygy

写在前面：echarts如果不给高度是无法显示的，这在很多场景中是非常不方便的。以下通过父div的高来计算echarts的高，以达到高度自适应的需求。

以下代码是在vue中引用echarts。

页面代码：

<div class="chartDiv" id="chartDiv_h">
       <div id="myChart_h"></div>
</div>

父div的css样式：

.chartDiv
  width: 100%;
  height: 100%;
  margin: 0 auto;

echarts代码块：

let myChartId = document.getElementById(chartId);
//高度计算
this.chartssize(document.getElementById(chartPid),myChartId);

let myChart = echarts.init(myChartId);
let option = 
          。。。
        ;
// 为echarts对象加载数据
myChart.clear();
myChart.setOption(option,true);
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener(‘resize‘, function () 
      myChart.resize()
);

高度计算方法chartssize（）：

    //为图表计算高度
    chartssize(container, charts) 
      function getStyle(el, name)
      
        if (window.getComputedStyle) 
          return window.getComputedStyle(el, null);
         else 
          return el.currentStyle;
        
      
      let wi = getStyle(container, ‘width‘).width;
      let hi = getStyle(container, ‘height‘).height;
      charts.style.height = hi；
    

写在后面：针对js部分的问题打开浏览器开发者模式，使用断点在console里面直接书写js代码慢慢调试可以发现解决大部分问题。