【Echarts】Echarts 图表宽度设置100%，图表显示只有100px的问题

本文主要是介绍【Echarts】Echarts 图表宽度设置100%，图表显示只有100px的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

经常遇到的场景：v-if和el-tabs切换图表不显示图表；

问题原因

图表的父容器设置了 display：none，图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后显示出来的图表就只有100px；

解决

<div id="lineChart" style="width: 100%;height: 300px;"></div>let chartDom = document.getElementById('lineChart');
// 获取图表容器
let myChart = echarts.init(chartDom);  //初始化图标myChart.setOption(option);myChart.resize();
// 设置宽度自适应
window.addEventListener('resize', () => {
if(chartDom.style.width ){chartDom.style.width = window.innerWidth + "px";myChart.resize();
}
});

这篇关于【Echarts】Echarts 图表宽度设置100%，图表显示只有100px的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---