The height and width of adaptive problems Echarts

EDITORIAL: echarts if you do not give height can not be displayed in many scenes this is very inconvenient. The following is calculated by a high-high echarts parent div to achieve highly adaptive needs.

The following code is quoted in echarts in vue.

Page code:

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

The parent div css style:

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

echarts code block:

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

let myChart = echarts.init(myChartId);
let option = {
          。。。
        };
// load data objects is echarts 
myChart.clear ();
myChart.setOption (the Option, to true );
 // suggested adding the following line of code, without the effect diagram below (when the browser window is narrow time). Exceeds the limit div (red border) 
window.addEventListener ( ' a resize ' , function () {
      myChart.resize()
});

Calculation method of chartssize ():

    // calculate the height of the chart 
    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；
    }

Written on the back: open the browser developer mode for js part of the problem, the use of direct write js code breakpoints in debugging console can be found inside slowly solve most problems.