echarts 图标使用rem解决刷新的问题

最新推荐文章于 2024-04-15 17:03:05 发布

置顶星河·

最新推荐文章于 2024-04-15 17:03:05 发布

阅读量1.5k

点赞数 1

分类专栏： js vue 教程文章标签： js

本文链接：https://blog.csdn.net/weixin_43365995/article/details/105139545

版权

vue 同时被 3 个专栏收录

28 篇文章 1 订阅

订阅专栏

教程

28 篇文章 0 订阅

订阅专栏

13 篇文章 0 订阅

订阅专栏

我们一般是在mounted中监听页面刷新人后在渲染完毕后在调用echarts

  mounted() {
      this.$nextTick(() => {
          this.initChart()
      })
  },
   methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.LineMarker)
      let left = this;
      left.$nextTick(function() {
          setTimeout(function () {
              console.log('执行')
              left.chart.resize();
          }, 500)
      })
    },

所以这里做一个延迟来刷新图表的resize ，我的监听页面变化来修改rem是一个统一的方法这里的话可以这样写

  mounted() {
      this.$nextTick(() => {
          this.initChart()
      })
  },
   methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.LineMarker)
      let left = this;
       left.$nextTick(function() {
          setTimeout(function () {
              console.log('执行')
              left.chart.resize();
          }, 500)
      })
       window.addEventListener("resize", function () {
           setTimeout(function () {
               console.log('执行')
               left.chart.resize();
           }, 500)
       });
    },

做一个先刷新在监听的动作