vue中的echart的渲染问题

最新推荐文章于 2023-05-18 11:12:57 发布

坐的我尾巴骨疼

最新推荐文章于 2023-05-18 11:12:57 发布

阅读量716

点赞数

分类专栏： Vue 设计模式文章标签： echart vue

本文链接：https://blog.csdn.net/qq_39038793/article/details/104838790

版权

Vue 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

设计模式

2 篇文章 0 订阅

订阅专栏

方法一：

 this.$nextTick(function () {//使用nextTick为了保证dom元素都已经渲染完毕
   const myObserver = new ResizeObserver(entries => {
      entries.forEach(entry => {
       $("#bar").width(entry.contentRect.width);
      $("#bar").height(entry.contentRect.height);
      this.drawEcharts()
        this.set()
      });
      });
     
      const someEl = document.querySelector('.container1');
      myObserver.observe(someEl);
})

方法二：

ageResize() {
        let that = this;
        $('.info_content').css('height',
          $(window).height() - $('.head').outerHeight(true) - $('.info_option').outerHeight(true) - $('.pagers').outerHeight(true) - 40);

        $(window).resize(function () {
          $('.info_content').css('height',
            $(window).height() - $('.head').outerHeight(true) - $('.info_option').outerHeight(true) - $('.pagers').outerHeight(true) - 40);
          that.myChart.resize()
        });
      },

方法三：

// let elementResizeDetectorMaker = require("element-resize-detector"); 
let erd = elementResizeDetectorMaker();
       let that = this;
       erd.listenTo(document.getElementsByClassName("right"), function (element) {
         that.$nextTick(function () {//使用nextTick为了保证dom元素都已经渲染完毕
           //使echarts尺寸重置
           $("#chartLineBox").width($(".right").width());
           $("#chartLineBox").height($(".right").height());
           this.drawEcharts()
           this.set()
         })
       })
       this.drawEcharts()
       this.set()