echart图表随页面缩放

最新推荐文章于 2024-02-27 14:49:30 发布

weixin_45979310

最新推荐文章于 2024-02-27 14:49:30 发布

阅读量244

点赞数

文章标签： echarts javascript html vue

本文链接：https://blog.csdn.net/weixin_45979310/article/details/120329698

版权

本文介绍了如何在Vue项目中实现Echarts图表随着HTML页面的缩放而自适应调整大小，确保在不同窗口尺寸下保持良好的显示效果。重点讨论了在拥有多个Echarts图表的页面上，通过二级DOM和挂载实例到`this`上的方法来实现图表的动态调整。

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

页面上的echart图随窗口大小缩放
◇ 在有echart图的页面

  data() {
   
    return {
   
      elScenic: null,   // 条形图的echarts
    };
  },
  methods: {
   
  	// 缩放 Echarts
    resize() {
   
      this.elScenic.resize();
      // 如果是组件式的，那么再this.$ref 一层，然后在 this.chart.resize();
    }
    initScenicChart() {
   
      // 放到data中
      this.elScenic = echarts.init(document.getElementById("scenic-chart"))