解决Echarts：宽度100%，渲染的宽度却是100px

最新推荐文章于 2024-10-16 16:47:44 发布

lq_20101224

最新推荐文章于 2024-10-16 16:47:44 发布

阅读量277

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/lq099526/article/details/142462984

版权

为什么我们宽度设置了100%，结果变为了100px？

源码这里没有获取到clientWidth，会将设置的width:100%转换称100px

解决办法：

<div ref="numberPieRef"></div>


let numberPieRef = ref(null);
let myChart = null;

function initChart() {
  if (numberPieRef.value) {
    numberPieRef.value.style.width = window.innerWidth - 300 + "px";
    numberPieRef.value.style.height = "500px";
    myChart = $eCharts.init(numberPieRef.value);
    myChart.showLoading();

    .....
    
    myChart.hideLoading();
    myChart.setOption({
      
        .........
      
    });

    window.addEventListener("resize", () => {
      myChart.resize();
    });
  }
}