echart图表自适应宽度失效问题探究

前情介绍：

最近做的一个vue项目中，使用echart图表组件展示数据，展示方式是点击按钮弹出弹层，在弹层中展示图表，使用vue组件方式：通过监听数据变化，在调用图表组件的页面中使用如下方法刷新数据:

this.$nextTick(function() {
 // 在这里赋值图表数据，渲染视图
})

问题描述：

弹出层的图表展示有时无法100%自适应宽度，图表数据展示如果是在页面中正常初始化就展示没有问题，但是如果是在初始化的弹层里默认为display:none，弹层显示的时候，图表自适应宽度计算会有一定几率出现宽度不准，查看dom节点样式设置宽度为100px，canvas宽度设置100px。

分析原因：

echart自适应中使用resize()方法，监听窗口的变化来修改echart图表来实现自适应，然而在初始化时样式为隐藏，弹出展示不能很好的计算弹层宽度，而使用了100%的宽度值为100px，出现自适应宽度样式显示不正常问题。

解决思路：

是点击弹层是动态设置组件宽度为固定值，监听弹层宽度变化自适应修改图表canvas宽度值。

示例：

1) 页面调用组件：

2) 组件源码：

3) 页面自适应实现：

export default {
  data() {    
     return {
        echartWidth: '100%'
     }
  },
  mounted() {
    this.resetChart()
  },
  methods: {
    resetChart() {
      const that = this
      window.onresize = () => {
        return (() => {
          // 获取弹层里图标外层宽度
          var cardBoxUser = document.querySelector('.box-card-user.item')
          var canvasUserWidth = document.querySelector('.box-card-user.item .chart div')
          // 显示弹层时
          if (that.dialogUserDetail === true) {
            that.echartWidth = cardBoxUser.offsetWidth + 'px'
            canvasUserWidth.style.width = that.echartWidth
          }
        })()
      }
    }
  },
  watch: {
    echartWidth(val) {
      if (!this.timer) {
        this.echartWidth = val
        this.timer = true
        const that = this
        setTimeout(function() {
          // console.log(that.echartWidth)
          that.timer = false
        }, 400)
      }
    }
  }
}

OK，这样就解决了echart图表在弹层中自适应宽度失效问题啦。