echarts容器高度根据数据数量自适应

echarts容器高度根据数据数量自适应

在echarts中，需要设置固定高度，当柱状图数据过多时会出现数据相互挤压，给用户的体验十分糟糕，可以通过给容器设置自适应高度，然后通过getDom()的方法解决此问题。

解决方法：
在图表setOption后添加如下代码：
//省略其他。。
即这段代码 myChart.setOption(option);后添加如下代码：

//解决高度不能自适应问题，counst.length为柱状图的条数，即数据长度。

var autoHeight = res.afterDate.length * 20 + 50; 
// res.afterDate.length为柱状图的条数，即数据长度。20为我给每个柱状图的高度。
myChart.getDom().style.height = autoHeight + "px";
myChart.resize();

或

  //将该echarts用之前配置好的option2的配置项进行渲染
      var autoHeight = res.afterDate.length* 20 + 50  // res.afterDate.length为柱状图的条数，即数据长度。20为我给每个柱状图的高度。
      //获取option2配置项中y轴的数据源的长度*每个柱状你想设定的高度+150的预留高度
      myChart.getDom().style.height = autoHeight + "px"
      //echarts有个getDom（）的方法可以设置获取 ECharts 实例容器的 dom 节点，给节点分别设置高度
      myChart.getDom().childNodes[0].style.height = autoHeight + "px"
      myChart.getDom().childNodes[0].childNodes[0].setAttribute("height",autoHeight)
      myChart.getDom().childNodes[0].childNodes[0].style.height = autoHeight + "px"
      //根据窗口的大小变动图表
      myChart.resize()