码迷,mamicode.com
首页 > 其他好文 > 详细

Echarts高和宽自适应问题

时间:2019-08-26 15:31:59      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:打开   resize   turn   css样式   数据   compute   ntb   mil   get   

写在前面: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代码慢慢调试可以发现解决大部分问题。

Echarts高和宽自适应问题

标签:打开   resize   turn   css样式   数据   compute   ntb   mil   get   

原文地址:https://www.cnblogs.com/gxr-tygy/p/11412228.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!