【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();
}
});

你可能感兴趣的:(前端,笔记,VUE,笔记,echarts,vue.js,前端)