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

目录 前言 原因分析 解决方式 一、nextTick 二、setInterval 总结

前言

弹出层中插入echarts图表，没有报错，但是图表加载不出来

此弹出层没有用element 的dia LOG 对话 框，用的自己封装的组件，但是出现的问题是一样的

原因 分析

弹出层 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。

弹出层组件会监听 visible 的状态，当状态为 true 时，立刻触发 o PE n 事件，但这个时候 弹出层 的内容还没有渲染。

因为 Vue 组件通过 $em IT 触发的事件并不是 异步执行 的，而是同步执行。

解决方式

一、nextTick

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

二、setInterval

&nbs p;

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

弹出层组件和画图方法：

    <popup :tClick="retreat From Save" :tBoot=" org anizationUp" tWidth='1080px'>  
      <div slot="m ai n" class="te am work -t ext-nr">
        <div class="line">实景图</div>
            <!-- 图表 -->
            <div id="sCharts" style="h ei ght: 500px;"></div>
          </div>
      <div slot="footer" style="text-align: right;padding-right: 30px;">
        <juris BT n tFloat="none" :tClick="retreatF rom Save" tName="关闭" type=" Primary "></jurisbtn>
      </div>
    </popup>

    //   图表
    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);
    },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的 文章 : 基于Echarts图表在div动态切换时不显示的解决方式 vue实现echart饼图legend显示百分比的方法 vue引用echarts饼图不显示图例的解决

总结

以上是 为你收集整理的 vue弹窗里面使用echarts不显示的问题及解决 全部内容，希望文章能够帮你解决 vue弹窗里面使用echarts不显示的问题及解决 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue弹窗里面使用echarts不显示的问题及解决的详细内容...