在element-ui的dialog弹框中使用echarts报错，不能出现图表TypeError: Cannot read property ‘getAttribute‘ of undefined

问题描述

最近在写一个vue项目，用的是element-ui框架，其中一个业务需求需要点击之后弹出一个dialog框，然后在这个框里进行渲染绑定的echarts。操作步骤没问题，和以往的操作一样，先是安装echarts使用

npm install echarts@4.8.0 --save

然后再main.js文件中引入并挂载到全局中

// 引入echarts
import echarts from 'echarts'
// 将echarts注册到Vue组件的原型对象中去
Vue.prototype.$echarts = echarts

然后在组件中去使用，给一个示例

mounted () {
    this.nodeAttrEcharts()
  },
methods: {
    nodeAttrEcharts () {
      // 基于准备好的dom，初始化echarts实例
      const nodeVisual = this.$refs.chart
      const myChart = this.$echarts.init(nodeVisual)
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '第一个 ECharts 实例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {