Echarts图高度设定 ref

最新推荐文章于 2024-09-05 10:24:48 发布

圣焱

最新推荐文章于 2024-09-05 10:24:48 发布

阅读量2.7k

点赞数

分类专栏： echarts vue css

本文链接：https://blog.csdn.net/Bruce_byan/article/details/115761396

版权

本文介绍了如何在Echarts中动态设置图表的高度。通过使用echarts实例的resize方法，可以实现图表高度随页面内容变化而调整。展示了动态设定Echarts高度后的实际效果。

摘要由CSDN通过智能技术生成

想要动态设定echarts的高度，需要echarts实例中resize
在这里插入图片描述

页面主体及相应样式
在这里插入图片描述

动态设定

      let chart1 = this.$refs.chart1.$echarts.init(document.getElementById("chart1"));//获取echarts实例对象
      chart1.setOption(options);//重新存入设定
      let chart2 = this.$refs.chart2.$echarts.init(document.getElementById("chart2"));
      chart2.setOption(options2);
      let chart3 = this.$refs.chart3.$echarts.init(document.getElementById("chart3"));
      chart3.setOption(options3);
      let height = arr.length*35