ECharts自适应宽度(resize)

  mounted() {
    window.onresize = () => {
      //  根据窗口大小调整曲线大小
      this.myChart1.resize();
      this.myChart2.resize();
      this.myChart3.resize();
      this.myChart4.resize();
    };
  },

三个echarts图表,明明宽度设置的都是100%,却只有第一个生效以及如何实现自适应
解决办法

1.初始化时需要加上,确保操作的是最新的DOM

this.$nextTick(_ => {   
     
});

2.echarts图表自适应实现,需要在渲染图表后加上
// 监听窗口变化 - 只刷新最后一个图表

        window.onresize = ()=> {
            this.pieEcharts.resize();
        }

// 监听窗口变化 - 多个图表同时刷新

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

版权声明:本文为qq_42816550原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。