标签：打开 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代码慢慢调试可以发现解决大部分问题。
标签：打开 resize turn css样式 数据 compute ntb mil get
原文地址：https://www.cnblogs.com/gxr-tygy/p/11412228.html
