vue弹窗里面使用echarts不显示的问题

た入场券 2022-02-28 11:54 669阅读 0赞

# 前言： #

*  弹出层中插入echarts图表，没有报错，但是图表加载不出来
 *  此弹出层没有用element 的dialog 对话框，用的自己封装的组件，但是出现的问题是一样的

## 原因分析： ##

弹出层 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。  
弹出层组件会监听 visible 的状态，当状态为 true 时，立刻触发 open 事件，但这个时候 弹出层 的内容还没有渲染。因为 Vue 组件通过 $emit 触发的事件并不是异步执行的，而是同步执行。

## 解决方式： ##

*  **一、nextTick**

this.$nextTick(() => { 
          // 执行echarts方法
            this.initEcharts()
          })

*  **二、setInterval**

setInterval(() => { 
            // 执行echarts方法
            this.initEcharts()
          }, 500);

## 弹出层组件和画图方法： ##

// 图表
        initEcharts() { 
          const myChart = this.$echarts.init(document.getElementById('sCharts'))
          const option = { 
            tooltip: { 
              trigger: 'axis',
              axisPointer: { 
                type: 'cross'
              }
            },
            xAxis: [
              { 
                type: 'category',
                data: [
                  '1月',
                  '2月',
                  '3月',
                  '4月',
                  '5月',
                  '6月',
                  '7月',
                  '8月',
                  '9月',
                  '10月',
                  '11月',
                  '12月'
                ],
                axisPointer: { 
                  type: 'shadow'
                }
              }
            ],
            yAxis: [
              { 
                type: 'value',
                name: '总体积',
                min: 0,
                max: 10,
                interval: 1,
                axisLabel: { 
                  formatter: '{value} m³'
                }
              },
              { 
                type: 'value',
                name: '使用负荷',
                min: 0,
                max: 100,
                interval: 10,
                axisLabel: { 
                  formatter: '{value} %'
                }
              }
            ],
            series: [
              { 
                name: '总体积',
                type: 'bar',
                data: [2.0, 4.9, 5.5, 2.2, 4.6, 6.7, 5.6, 6.2, 3.6, 2.0, 6.4, 3.3],
                itemStyle: { 
                  normal: { 
                    color: '#d0e17d'
                  }
                }
              },
              { 
                name: '使用负荷',
                type: 'line',
                yAxisIndex: 1,
                data: [100, 22, 33, 45, 63, 80, 20, 23, 23, 65, 12, 6.2],
                itemStyle: { 
                  normal: { 
                    color: '#898989'
                  }
                }
              }
            ]
          }
          myChart.setOption(option);
        },