Echarts⾼和宽⾃适应问题
写在前⾯：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 = ElementById(chartId);
//⾼度计算
this.ElementById(chartPid),myChartId);
let myChart = echarts.init(myChartId);
let option = {
。。。
};
// 为echarts对象加载数据
myChart.clear();
myChart.setOption(option,true);
//建议加上以下这⼀⾏代码，不加的效果图如下（当浏览器窗⼝缩⼩的时候）。超过了div的界限（红⾊边框）
window.addEventListener('resize', function () {
});
⾼度计算⽅法chartssize（）：
//为图表计算⾼度
chartssize(container, charts) {
setoptionfunction getStyle(el, name)
{
if (ComputedStyle) {
ComputedStyle(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代码慢慢调试可以发现解决⼤部分问题。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。